gulp-rev解决浏览器缓存问题

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。
gulp-rev则会根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。

通过gulp脚本部署, 就可以做到当我们文件内容发生改变时, 浏览器读取新文件，而不会因为缓存问题，页面无法立即刷新，以下以css, js文件版本控制为例:

安装插件依赖

推荐使用gulp-rev，gulp-rev-collector 插件

1
2
3

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-704b29f56c.css": "css/index-704b29f56c.css",
  "js/main-fa5d099be3.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

1	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);
})