1. 简介
gulp-rev-collector-param 是一款非常实用的前端 npm 包，它可以帮助我们自动生成 hash 文件名，以及自动替换引用的文件路径。本篇文章将详细介绍该 npm 包的使用方法。
2. 安装
使用 npm 命令进行安装：
--- ------- ------------------------ ----------
3. 使用方法
3.1 基本用法
3.1.1 生成 hash 文件名
在 gulpfile.js 文件中加入以下代码：
--- ---- - ----------------
--- --- - --------------------
--- --------- - ------------------------------------
---------------- -------- -- -
-- -- ---- ---
------ ------------------------
------------
------------------------
---------------------
-------------------------
---
---------------------- -------- -- -
-- --------
------ -------------------------------------- --------------
------------------
-------------------------
---
-------------------- ------- --------------在命令行中使用 gulp 命令执行：
----
执行该命令后，gulp-rev-collector-param 会自动扫描你的资源文件，生成一个新的 rev-manifest.json 文件，该文件记录了新文件名与原文件名的对应关系。
3.1.2 替换引用路径
gulp-rev-collector-param 还可以自动替换引用文件路径，只需在 gulpfile.js 文件的 collector 任务中添加参数即可：
-------------------------------------
上述代码会自动将引用的文件名替换成带有 hash 的文件名，从而避免浏览器缓存问题。
3.2 参数介绍
在 gulpfile.js 文件的 collector 任务中，我们还可以添加其他的参数控制 gulp-rev-collector-param 的行为。
3.2.1 参数列表
以下是 gulp-rev-collector-param 支持的参数列表：
replaceReved：是否替换重命名的文件。 -- 类型：Boolean -- 默认值：false -- 示例代码：
.pipe(collector({replaceReved:true}))dirReplacements：自定义目录替换规则。 -- 类型：Object -- 示例代码：
.pipe(collector({dirReplacements: { '/js': '/public/js' }}))revSuffix：哈希值后缀。 -- 类型：String -- 默认值：无。 -- 示例代码：
.pipe(collector({revSuffix: '_cdn'}))extMap：文件扩展名映射表。 -- 类型：Object -- 示例代码：
.pipe(collector({extMap: {'.*': '.php'}}))
3.2.2 参数说明
replaceReved：一般设置为 true，用于开启重命名文件自动替换功能。如果设置为 false，这将导致 gulp-rev-collector-param 只生成 hash 文件名，不做自动替换。
dirReplacements：自定义目录替换规则，可以为指定目录内的文件设置自定义路径。设置示例：
.pipe(collector({dirReplacements: { '/js': '/public/js' }}))，该示例会将 /js 目录下的所有资源替换为 /public/js。revSuffix：哈希值后缀，用于控制文件名中哈希值的格式。设置示例：
.pipe(collector({revSuffix: '_cdn'}))，该示例会在哈希值后面添加 _cdn 后缀。extMap：为扩展名映射表，用于控制文件的文件类型，可选值有：.* /html /css /js。设置示例：
.pipe(collector({extMap: {'.*': '.php'}}))，该示例将所有文件扩展名替换为 .php。
4. 总结
通过本文的介绍，我们可以看到 gulp-rev-collector-param 在前端项目中的实际应用。这个 npm 包不仅可以方便地生成 hash 文件名，还可以自动替换路径，大大提高了前端开发的效率。如果您在项目中需要自动化生成 hash 文件名，并自动替换路径，则可以考虑使用本文介绍的 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600573c381e8991b448e9b6c