在我们的前端开发工作中，通常会把静态资源进行版本管理并进行缓存处理，而gulp-rev-collector-client是一个非常常用的npm包，它可以自动的修改你的html模板中的静态文件路径，保证每个页面加载的都是所依赖版本的文件。本文将详细介绍gulp-rev-collector-client的使用教程。
简介
gulp-rev-collector-client是gulp-rev的一个插件，主要用于收集rev-manifest.json文件中所记录的静态资源版本信息。一般情况下，我们需要在html中手动使用gulp-rev生成的带版本号的静态资源路径，而使用gulp-rev-collector-client插件可以自动将静态文件与其版本号关联，替换html中使用的引用路径。
安装
安装前请确保已安装好gulp和gulp-rev：
npm install --save-dev gulp gulp-rev
安装gulp-rev-collector-client：
npm install --save-dev gulp-rev-collector-client
使用
1.配置gulp-rev
在gulpfile.js中配置gulp-rev，先生成rev-manifest.json文件，记录静态资源版本信息：
-- -------------------- ---- -------
--- ---- - ----------------
--- --- - --------------------
-------------------- -------- -- -
------ --------------------
------------
------------------------
---------------------
------------------------
---2.配置gulp-rev-collector-client
gulp-rev-collector-client插件用于收集rev-manifest.json中记录的静态资源版本信息，在html中自动替换相关路径，配置方式如下：
var gulp = require('gulp');
var revCollectorClient = require('gulp-rev-collector-client');
gulp.task('default', function () {
return gulp.src(['rev/**/*.json', 'src/**/*.html'])
.pipe(revCollectorClient())
.pipe(gulp.dest('dist'));
});3.示例代码
-- -------------------- ---- -------
--- ---- - ----------------
--- - --------------------
------------------ - -------------------------------------
---------------- ---------- -
------ -------------------------------------------------
------------
-------------------------
---------------------
----------------------------
--
--------------------------------- -------- -- -
------ ----------------------------
--------------------------
------------- -----
---------------- -
-------- --------
------- ------
-
---
------------------------
--
-- --------------------------------
-------------------- --------------------------------参数
replaceReved
类型：Boolean 默认值：false
是否替换已经被替换过的路径，例如css/style.css?v=123替换后变为css/style-844d20e0.css，replaceReved=true时会替换为css/style-844d20e0.css?v=123，默认为false。
dirReplacements
类型：Object 默认值：{}
替换文件目录，例如：{'html/':'','js/':'scripts/'}
结语
gulp-rev-collector-client是一个非常好用的gulp插件，它可以简化前端开发人员的工作量，提高开发效率。希望本文能够对初学者有所帮助，同时也能对已经掌握一定gulp知识的同学提供一些扩展思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de0e3