在前端开发过程中，我们经常需要对静态资源进行版本控制，这样有助于缓存更新和优化页面性能。而 gulp 是一个在前端开发中广泛使用的自动化构建工具，它有许多插件可以协助我们完成这些任务。其中一个非常常用的插件是 gulp-rev，它可以为静态资源生成唯一的版本号，并将版本号添加到文件名中，同时生成对应的 manifest 文件。而 simply-gulp-rev-collector 是一个用于根据 manifest 文件替换文件路径的 gulp 插件，本文将为你介绍该插件的使用方法。
安装
首先需要在项目中安装 gulp 及相关插件和 simply-gulp-rev-collector：
npm install --save-dev gulp gulp-rev gulp-rev-collector simply-gulp-rev-collector
使用
1. 生成版本号
在 gulpfile 中定义一条 gulp-rev 任务，用于为静态资源生成版本号，例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
---------------- -- -- -
-- ------
------ ------------------------
-- -----
------------
-- ------- ---- --
------------------------
-- ----- -------- --
---------------------------------------------
-------------------------
---2. 替换文件路径
接着，定义一条 revCollector 任务，用于根据 manifest 文件替换静态资源的路径：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -------------------------------------
------------------------- -- -- -
------ --------------------------- -----------------
-------------------- -- ------------------------- ---
------------- ----- -- -----------
---------------- -
------ ------------
----- ----------
-
---
-------------------------
---其中，revCollector 的输入路径包含了我们之前生成的 manifest，以及需要替换的 HTML 和 CSS 文件。
配置项解析：
replaceReved（默认为false）指定是否替换已经有版本号的路径。dirReplacements用于指定 directory → directory 的映射关系，将某些 directory 中的文件替换为另一个 directory 中的文件。例如上述配置中，css目录下的文件路径将被替换为/dist/css目录下的路径。
配置完成后，运行任务：
gulp rev gulp revCollector
至此，你的静态资源的版本号就已经生成，并且路径已经被正确替换。
示例
假设你有如下的项目结构：
- index.html - css - style.css - js - demo.js - gulpfile.js
- 在
gulpfile.js中定义gulp-rev任务：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
---------------- -- -- -
------ ------------------------ -------------
------------
--------------------------
---------------------
---------------------------
---这个任务将为 CSS 和 JS 文件生成版本号，同时生成 manifest 文件。
运行 gulp rev 后，可以得到一个类似于下面的 manifest：
{
"css/style.css": "style-f9e99b7c.css",
"js/demo.js": "demo-24e3ee3c.js"
}- 定义
simply-gulp-rev-collector任务：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -------------------------------------
-------------------- -- -- -
------ -------------------------- ----------------
--------------------
------------- -----
---------------- -
------ --------
----- -------
-
---
---------------------------
---这个任务将根据 manifest 文件替换 HTML 中的文件路径，同时生成处理后的 HTML 到 dist 目录。
运行 gulp collect 后，你会得到处理后的 index.html：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------------- --------------- ----- ---------------- -------------------------------- ------- ------ ------- -------------------------------------- ------- -------
此时你的静态资源已经成功地完成版本控制。如果你运行 gulp collect 多次，插件会自动替换已经有版本号的文件，保证版本号唯一且正确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e29d1