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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。