前言
在现代的前端开发中，我们经常会使用到构建工具来完成一些自动化的任务，如压缩 JS、CSS、图片等文件、处理 ES6、Less 等开发语言、自动生成文档等功能。而其中一个很重要的构建工具是 gulp，它已经成为了前端构建工具中的一种事实标准。在使用 gulp 处理文件的时候，我们经常使用到 gulp-rev 和 gulp-rev-collector 来生成和替换文件的 hash 值，而这个过程会比较繁琐。于是，一位名叫 James Wyse 的开发者就开发了一个叫做 gulp-rev-replace 的 npm 包，它可以在一步之内完成生成和替换 hash 值的操作，大大简化了我们的开发流程。本文就来详细介绍一下如何使用 gulp-rev-replace。
安装
在开始使用 gulp-rev-replace 之前，我们需要先安装 gulp 和 gulp-rev。如果你已经安装好了这两个包，那么就可以直接使用 npm 安装 gulp-rev-replace：
npm install --save-dev gulp-rev-replace
使用
在使用 gulp-rev-replace 之前，我们需要先了解一下 gulp-rev 的用法。gulp-rev 是一个生成 hash 值的插件。我们可以通过下面的代码来设置：
gulp.task('rev', function() {
return gulp.src('src/**/*')
.pipe(rev())
.pipe(gulp.dest('dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev'))
})这个 gulp 任务会将 src 目录下的所有文件生成对应的 hash 值，并将生成的文件和对应的 manifest 文件都保存到 dist 和 rev 目录下。之后，我们需要通过 gulp-rev-collector 或者其他相关工具将生成的 manifest 文件中的 hash 值替换到 HTML 或者其他文件中的对应位置，其实这个过程是比较繁琐的。
而使用 gulp-rev-replace，我们只需要修改上面的 gulp 任务为：
-- -------------------- ---- -------
--- ---------- - ----------------------------
---------------- ---------- -
--- -------- - --------------------------------
------ --------------------
------------
------------------------
---------------------
-----------------------
------------------ --------- -------- ---
------------------------
---功能
gulp-rev-replace 可以扫描 src 目录下的所有 HTML/CSS/JS 等文件，查找其中的 URL，如果这个 URL 对应的文件有 hash 值，则自动将原 URL 替换成 URL+hash。比如，在 src 目录下有个 index.html 文件：
<link rel="stylesheet" href="css/main.css"> <script src="js/app.js"></script>
而在 dist 目录下，css/main.css 文件的 hash 值为 4e2d3144，js/app.js 文件的 hash 值为 6bfa1c31。通过 gulp-rev，我们可以在 manifest.json 文件中找到对应的 hash 值：
{
"js/app.js": "js/app-6bfa1c31.js",
"css/main.css": "css/main-4e2d3144.css"
}在使用 gulp-rev-replace 之后，gulp 任务会自动将 index.html 中的 URL 替换为：
<link rel="stylesheet" href="css/main-4e2d3144.css"> <script src="js/app-6bfa1c31.js"></script>
如果有多个 manifest 文件，我们可以设置 replaceInExtensions 选项，来限定仅替换指定类型的文件，比如：
revReplace({
manifest: manifest,
replaceInExtensions: ['.html', '.md'],
});总结
使用 gulp-rev-replace 可以方便地将 gulp-rev 生成的 hash 值自动替换到对应的文件中，极大地简化了我们的开发流程。不过要注意，gulp-rev-replace 无法自动添加 manifest 文件到 HTML 中，所以需要结合其他相关工具使用。当然，这也可以通过写一个自定义的 Gulp 插件来实现，这里不做过多赘述。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60771