在前端开发中，我们经常会遇到需要对静态资源进行版本控制的情况，这样可以避免浏览器缓存而引起的问题。而gulp-rev-collector-ayou是一款可以方便地处理文件名与其对应的哈希码的npm包。
前置知识
在使用gulp-rev-collector-ayou之前，需要掌握一些基本的gulp和node.js概念：
gulp：一款基于流的自动化构建工具，简化前端工程化流程，可以将一系列的任务串行或并行处理，例如文件压缩、代码检查等。
node.js：一种基于Chrome JavaScript引擎的JavaScript运行环境，提供了许多有用的API和工具函数，可以用于构建简单的服务端应用程序。
安装
npm install gulp-rev-collector-ayou --save-dev
用法
- 首先，我们需要在gulpfile.js文件中引入此插件：
var revCollector = require('gulp-rev-collector-ayou');- 然后，我们需要创建一个任务来处理文件名与哈希码的匹配，并将其保存到新文件中：
gulp.task('rev', function() {
return gulp.src(['./rev/**/*.json', './app/**/*.html'])
.pipe(revCollector({
replacedReved: true
}))
.pipe(gulp.dest('./dist/'));
});在上面的代码中，我们使用了gulp.src读取所有需要处理的文件，包括被替换后的哈希码文件和HTML文件。然后我们使用gulp-rev-collector-ayou插件来匹配文件名和哈希码，最后将结果保存到新的文件中。其中，参数replacedReved表示是否同时替换以前被替换过的哈希码。
- 最后，在命令行中运行
gulp rev即可启动这个任务。在执行完这个任务后，匹配文件的哈希码就会被正确地替换成新的哈希码。
示例代码
这里我们提供一个完整的gulpfile.js文件示例，供参考：
-- -------------------- ---- -------
--- ---- - ----------------
--- --- - --------------------
--- ------------ - -----------------------------------
---------------- ---------- -
------ --------------------------- -----------------
------------
---------------------------
---------------------
--------------------------
---
------------------------- ---------- -
------ ---------------------------- -------------------
--------------------
-------------- ----
---
----------------------------
---
-------------------- ------- -----------------在这个示例代码中，我们使用了gulp-rev包来生成哈希码，然后使用gulp-rev-collector-ayou插件来进行匹配、替换，最后生成新的文件。最后，我们创建了一个default任务来同时执行以上两个任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555ee81e8991b448d2f78