gulp打包加版本号,解决重复加版本号

1,459 阅读1分钟

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

可是多执行几次gulp就会发现,eeee啥玩意,变成了这样,版本号重复多次添加

这时,我们需要改下gulp源码
找到gulp-rev-collector下的index.js源码 第一处:修改了函数 escPathPattern,代码修改为:

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)