gulp 给静态资源文件添加hash(md5)后缀 防止缓存

一、安装需要的包

npm install gulp gulp-rev run-sequence gulp-rev-collector --save-dev

---

二、配置gulpfile.js

var gulp = require('gulp'),  
    runSequence = require('run-sequence'),  
    rev = require('gulp-rev'),  
    revCollector = require('gulp-rev-collector');  

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射  
gulp.task('revCss', function(){  
    return gulp.src('./shalen/css/*.css')  
        .pipe(rev())  
        .pipe(gulp.dest('./yes/css'))  
        .pipe(rev.manifest())  
        .pipe(gulp.dest('./yes/css'));  
});  

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射  
gulp.task('revJs', function(){  
    return gulp.src('./shalen/js/*.js')  
        .pipe(rev())                     //给文件添加hash编码  
        .pipe(gulp.dest('./yes/js'))  
        .pipe(rev.manifest())            //生成rev-mainfest.json文件作为记录  
        .pipe(gulp.dest('./yes/js'));  
});  

//Html替换css、js文件版本  
gulp.task('revHtmlCss', function () {  
    return gulp.src(['./yes/css/*.json', './shalen/zhuye.html'])  
        .pipe(revCollector())             //替换html中对应的记录  
        .pipe(gulp.dest('./yes'));        //输出到该文件夹中  
});  
gulp.task('revHtmlJs', function () {  
    return gulp.src(['./yes/js/*.json', './yes/zhuye.html'])  
        .pipe(revCollector())  
        .pipe(gulp.dest('./yes'));  
}); 

gulp.task('build', function (done) {  
    condition = false;  
    //依次顺序执行  
    runSequence(  
        ['revCss'],  
        ['revHtmlCss'],  
        ['revJs'],  
        ['revHtmlJs'],  
        done);  
});

---

三、修改node_modules下的插件源码

不修改是这样的：

修改插件源码后是这样的：

具体修改步骤：

1. 打开 node_modules\gulp-rev\index.js
第144行: manifest[originalFile] = revisionedFile;
修改为: manifest[originalFile] = originalFile + '?v=' +file.revHash;

2. 打开 node_modules\rev-path\index.js
第10行:return filename + '-' + hash + ext;
修改为: return filename + ext;

3. 打开 node_modules\gulp-rev-collector\index.js
第40行: let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
修改为: let cleanReplacement = path.basename(json[key]).split('?')[0];

ok，搞定~！