前言
当我们开发一个前端项目时，经常需要将静态资源进行版本控制。而在版本控制中，文件名版本号的自动化处理是一件比较繁琐的事情。gulp-rev-collector-xiezh 这个 npm 包可以大大简化我们的工作。
gulp-rev-collector-xiezh 是 gulp-rev 插件的扩展版本。gulp-rev 插件可以给项目中的静态资源添加 md5 值、生成新的文件名版本号等操作。而 gulp-rev-collector-xiezh 可以通过 manifest.json 文件来自动替换 HTML 或 CSS 文件中的静态资源路径为新的带有版本号的路径。本文将详述如何使用 gulp-rev-collector-xiezh。
安装
使用 npm 安装 gulp-rev-collector-xiezh：
npm install gulp-rev-collector-xiezh --save-dev
配置
生成静态资源版本号
在使用 gulp-rev-collector-xiezh 替换静态资源路径之前，我们需要先生成带版本号的文件。使用 gulp-rev 插件，可以轻松地为静态资源添加版本号。
下面是一个使用 gulp-rev 插件生成 md5 文件名的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
------------------- -------- -- -
------ ---------------------------------------
------------
---------------------------------
---------------------
---------------------------
---在执行上述代码后，将会在 dist 目录下生成一个 manifest.json 文件，里面包含有每个静态资源的原始文件名和新的带版本号的文件名的映射关系。
替换静态资源路径
生成了包含静态资源带版本号信息的 manifest.json 文件后，我们就可以开始替换 HTML 或 CSS 文件中的静态资源路径为带有版本号的路径了。
创建 gulp 任务，并使用 gulp-rev-collector-xiezh 插件：
const gulp = require('gulp');
const revCollector = require('gulp-rev-collector-xiezh');
gulp.task('rev', function () {
return gulp.src(['./dist/**/*.json', './src/**/*.html', './src/**/*.css'])
.pipe(revCollector({replaceReved: true}))
.pipe(gulp.dest('./dist'));
});上述代码中使用了 gulp-rev-collector-xiezh 插件，并传入了 replaceReved 参数，以保证替换重复的静态资源路径。
最后，在 package.json 中添加一条命令：
{
"scripts": {
"build": "gulp static && gulp rev"
}
}运行 npm run build 命令即可运行 gulp 任务，生成带版本号的静态资源并替换需要替换的静态资源路径。
总结
通过上述方法，我们可以轻松地生成带版本号的静态资源，并自动替换 HTML 或 CSS 文件中的静态资源路径。虽然 gulp-rev-collector-xiezh 的使用方法较为简单，但在实际项目中，应该结合自身的业务需求，更好地使用 gulp-rev-collector-xiezh。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822cfe