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

Posted 2020-09-20 浅唱年华1920

分别安装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})*"
                        );

 

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

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