在写官网的时候为了解决js跟css的缓存问题,就用gulp打包加版本号,结果发现版本号添加重复问题 打完包以后会发现成功了,没有问题



function escPathPattern(pattern) {
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;
}
第二处:修改了函数revCollector中的for(var key in manifest)下面的第一个条件判断,代码如下:
if (opts.replaceReved) {
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})*"
);
}
第三处:修改了函数revCollector中的for(var key in manifest)下面的第二个条件判断中的regexp: new RegExp( dirRule.dirRX + pattern, 'g' ),,代码如下:
if (dirReplacements.length) {
dirReplacements.forEach(function (dirRule) {
patterns.forEach(function (pattern) {
changes.push({
regexp: new RegExp(dirRule.dirRX + pattern + '(?v=w{10})?', 'g'),
patternLength: (dirRule.dirRX + pattern).length,
replacement: _.isFunction(dirRule.dirRpl)
? dirRule.dirRpl(manifest[key])
: closeDirBySep(dirRule.dirRpl) + manifest[key]
});
});
});
}


最后附上我的gulpfile.js文件
const {series, src, dest} = require('gulp')
const rev = require('gulp-rev')
const revCollector = require('gulp-rev-collector')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')
require('./changeScript')
const cssSrc = './src/**/*.css'
const jsSrc = './src/**/*.js'
function revJs() {//js加版本号
return src(jsSrc).pipe(rev()).pipe(rev.manifest()).pipe(dest('./rev/js'))
}
function revCss() {//css加版本号
return src(cssSrc).pipe(rev()).pipe(rev.manifest()).pipe(dest('./rev/css'))
}
function revHtml() {//html中引用替换
return src(['rev/**/*.json', 'src/**/*.html']).pipe(revCollector()).pipe(dest('src'))
}
function static() {
return src('./src/**/*.*')
.pipe(dest('./dist/'))
}
function css() {
return src('./src/**/*.css')
.pipe(postcss([
autoprefixer({
}),
precss()
]))
.pipe(dest('./dist/'))
}
exports.default = series(revJs, revCss, revHtml, static, css)