gulp 添加版本号 解决浏览器缓存问题

本文介绍如何通过修改Gulp插件源代码实现资源文件版本号的自定义添加,包括处理CSS图片路径哈希值、更新manifest文件及修订路径匹配规则。

分别安装gulp-rev、gulp-rev-collerctor、gulp-asset-rev,安装了的略过

npm install gulp-rev --save-dev

npm install gulp-rev-collerctor --save-dev

npm install gulp-asset-rev --save-dev

gulp-asset-rev是处理css图片路径哈希值的

打开node_modules\gulp-assets-rev\index.js

78行 var verStr = (options.verConnecter || "-") + md5;
更新为:var verStr = (options.verConnecter || "") + md5;
80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
更新为:src=src+"?v="+verStr;

//版本号添加修改

1.打开node_modules\gulp-rev\index.js

     第144行 manifest[originalFile] = revisionedFile;
    更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

2.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js

    10行 return filename + '-' + hash + ext;
    更新为: return filename + ext;

 第三步:打开node_modules\gulp-rev-collector\index.js

第一处修改为:

if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
                          isRev = 0;
                  }

 第二处修改为:

var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
    rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
    return rp;

第三处修改为:

patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
                        );

 

可能因为版本更替,可能行号变了,具体以图为准

详情见图片 图片为修改后的内容

转载于:https://www.cnblogs.com/bruce-gou/p/6923440.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值