gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。
gulp-rev则会根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。
通过gulp脚本部署, 就可以做到当我们文件内容发生改变时, 浏览器读取新文件，而不会因为缓存问题，页面无法立即刷新，以下以css, js文件版本控制为例:
安装插件依赖
推荐使用gulp-rev，gulp-rev-collector 插件
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
CSS,JS文件版本控制
静态资源存放在public目录，版本映射文件存放在rev目录，根据具体目录自行修改
var gulp = require('gulp');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
gulp.task('rev-css', function() {
return gulp.src('./public/**/*.css')
.pipe(rev()) // 对css文件MD5
.pipe(gulp.dest('./public'))
.pipe(rev.manifest()) //生成映射文件存放在rev/css目录
.pipe(gulp.dest('rev/css'));
});
gulp.task('rev-js', function() {
return gulp.src('./public/**/*.js')
.pipe(rev()) // 对JS文件MD5
.pipe(gulp.dest('./public'))
.pipe(rev.manifest()) //生成映射文件存放在rev/js目录
.pipe(gulp.dest('rev/js'));
});
执行完以上两个任务后，就可以在rev/js, rev/css找到rev-manifest.jsonMD5映射文件，形如:
{
"css/index.css": "css/index-704b29f56c.css",
"js/main.js": "js/main-fa5d099be3.js"
}
根据映射文件替换HTML内容
gulp.task('rev-html', function() {
//读取rev目录下的rev-manifest.json文件，替换引用的css,js路径
return gulp.src(['rev/**/*.json', './public/**/*.html'])
.pipe(revCollector({
replaceReved: true,//允许替换, 已经被替换过的文件
}))
.pipe(gulp.dest('./public'));
});
创建Gulp默认任务(可选)
以上操作完成后,就可以直接将public目录部署到服务器上即可，但每次都要执行3条命令太麻烦，所以我们可以创建个默认任务，之后执行gulp命令即可一键完成。
首先rev-css和rev-js任务可以是并行的，rev-html必须在前面两个任务完成后才执行，所以我们这里可以安装gulp-run-sequence插件来控制任务的串并行。（或者使用gulp 4.X版本的gulp.parallel, gulp.series）
- 安装
gulp-run-sequence
npm install --save-dev gulp-run-sequence
- gulp脚本
var runSequence = require('gulp-run-sequence');
// 先压缩css和js文件后，在执行html替换(要确保MD5之后)
gulp.task('default', function(cb) {
runSequence(['rev-css','rev-js'], 'rev-html', cb);
})
评论