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,搞定~!
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499318.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步