旁观自己 善待朝夕|

猫老板的豆

园龄:9年4个月粉丝:52关注:0

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 中国大陆许可协议进行许可。

posted @   猫老板的豆  阅读(384)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.