版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84768953
需求分析：
- 浏览器会缓存js、css文件，所以在每次升级js或css文件之后，需要浏览器重新加载这些文件也就是我们常说的刷新缓存。
- 所以需要在js、css文件后面加上版本号。
一、版本号添加方式
本文将采用第二种方式就行讲解
1、改变文件名称
- 这种方式必须同时改变资源的文件名和html里面引用的文件名，并且一一对应
- 可以用 gulp-rev gulp-rev-collector 两个插件实现。
- 效果如下：
{
"css/main.min.css" : "css/main-1d87bebe.min.css"
"js/main.min.js" : "js/main-61e0be79.min.js"
}
2、在文件后缀名之后通过添加 ?hash 实现
- 这种方式只需要给html里面引用的文件名添加版本号即可。只要版本号改变，浏览器就会认为它是该文件的某个版本，浏览器会重新加载这个文件：
<script src=”main.min.js?61e0be79”></script> 等价于
<script src=”main.min.js”></script>
- 可以用 gulp-rev-dxb gulp-rev-collector-dxb 两个插件实现。
- 效果如下：
{
"css/main.min.css" : "css/main.min.css?1d87bebe"
"js/main.min.js" : "js/main.min.js?61e0be79"
}
二、安装gulp-rev-dxb、gulp-rev-collector-dxb模块
npm i -D gulp-rev-dxb gulp-rev-collector-dxb
三、gulp-rev-dxb参数说明
1、rev()
给文件添加版本号
2、rev.manifest()
生成版本号清单文件
/**
* @param path {String} 生成文件的路径及文件名，如：rev/manifest.josn
* @param option
*/
rev.manifest([path], [options])
四、gulp-rev-dxb配置使用
1、创建 rev 任务。因为不需要给 dist/ 下的文件添加版本号，所以 .pipe(rev()) 后面不需要写 .pipe(gulp.dest("./dist"))
var rev = require('gulp-rev-dxb'); // 生成版本号清单
// 生成版本号清单
gulp.task('rev', function() {
return gulp.src(['./dist/js/**', './dist/css/**'])
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest("./"));
});
2、添加到 build 任务。因为要依赖打包过后的文件 dist/ ，所以该任务要在资源文件打包完毕之后再执行
gulp.task('build', function(cb) {
set_env('build');
runSequence(
['clean'], // 首先清理文件，否则会把新打包的文件清掉
['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行，提高效率
['rev'], // 所有文件打包完毕之后开始生成版本清单文件
cb);
});
3、执行gulp run build命令
五、gulp-rev-collector-dxb参数说明
/**
* @param options {Object}
* @param options.replaceReved {Boolean}
* @param options.dirReplacements {Object}
* @param options.extMap {Object} Default:
* {
'.scss': '.css',
'.less': '.css',
'.jsx': '.js'
}
*/
revCollector([options])
六、gulp-rev-collector-dxb配置使用
1、创建 add_version 任务
var revCollector = require('gulp-rev-collector-dxb'); // 替换成版本号文件
// 添加版本号（路径替换）
gulp.task('add_version', function() {
return gulp.src(['./rev-manifest.json', './dist/*.html'])
.pipe(revCollector()) // 根据.json文件 执行文件内js/css名的替换
.pipe(gulp.dest('./dist'));
});
2、添加到 build 任务。因为要依赖rev-manifest.json ，所以该任务要在 rev 之后再执行
gulp.task('build', function(cb) {
set_env('build');
runSequence(
['clean'], // 首先清理文件，否则会把新打包的文件清掉
['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行，提高效率
['rev'], // 所有文件打包完毕之后开始生成版本清单文件
['add_version'], // 根据清单文件替换html里的资源文件
cb);
});
3、执行gulp run build命令
.
项目地址（别忘了给星哦）
相关文章
gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题