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，搞定~！