gulp 添加版本号

Posted 2021-04-08 阅历之屋

首先一搜索大概的都是这种方法，于是自己开始尝试，只需要给css和js添加版本号

1、安装依赖

npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector

2、更改gulpfile.js代码

里面的路径是需要大家自己根据项目配置

const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');

gulp.task('revCss', function(){
  return gulp.src('app/public/less/**/*')
      .pipe(rev())
      .pipe(rev.manifest())
      .pipe(gulp.dest('dist/rev/less'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
  return gulp.src('app/public/js/**/*')
      .pipe(rev())
      .pipe(rev.manifest())
      .pipe(gulp.dest('dist/rev/js'));
});
//html替换css、js文件版本
gulp.task('revHtml', ['revCss', 'revJs'], function () {
  return gulp.src(['dist/rev/**/*.json','app/view/**/*.nj'])
      .pipe(revCollector())
      .pipe(gulp.dest('app/view'));
});

gulp.task('default', [ 'revHtml' ], () => {

});

3、运行gulp就可以看到相关文件后面已经被替换（根据下图的json文件替换的）

{
  "article.js": "article-66d663ec39.js",
  "blog.js": "blog-8753a58917.js",
  "changeEmail.js": "changeEmail-1950399b3c.js",
  "changePassword.js": "changePassword-218f34d707.js",
  "common.js": "common-489ea015e4.js",
  "education.js": "education-1c40c32798.js",
  "forgetPassword.js": "forgetPassword-63fc89c5bb.js",
  "home.js": "home-ec99d4f489.js",
  "index.js": "index-100ce5d07a.js",
  "locale/en.js": "locale/en-806949483f.js",
  "locale/tc.js": "locale/tc-fccb1b73c2.js",
  "login.js": "login-cd43173320.js",
}

但是这不是我们像样的在文件后面加？v=[版本号]

4、需要修改相关依赖

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

其中的： manifest[originalFile] = revisionedFile;
更新为： manifest[originalFile] = originalFile + '?v=' + file.revHash;

2、  打开node_modules\rev-path\index.js

其中的： `${filename}-${hash}${ext}`;
更新为： `${filename}${ext}`;

3、  打开node_modules\gulp-rev-collector\index.js

找到：  let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更改为：  let cleanReplacement =  path.basename(json[key]).split('?')[0];

其次找到： regexp: new RegExp( prefixDelim + pattern, 'g' ),
更改为： regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),

现在再运行gulp就可以看到所有的都已经被替换

遇到的问题：json文件修改了，但是html里面的链接未修改， 我git checkout — html文件
再次运行gulp就可以了

参考：https://blog.csdn.net/qq_22855325/article/details/76582589

缺点：需要修改相关依赖，我希望我不修改依赖

于是我看了同事的代码如下：

1、安装依赖

npm install --save-dev gulp-pipe
npm install --save-dev gulp-replace
npm install --save-dev gulp-rev-all

2、更改gulpfile.js代码

const pipe = require('gulp-pipe');
const RevAll = require('gulp-rev-all');
const replace = require('gulp-replace');

// js和css文件添加版本控制
gulp.task('version', [ 'less', 'js' ], () => {
  const keys = [];
  return Promise.all([
    new Promise((resolve, reject) => {
      gulp.src('dist/css/**')
        .pipe(RevAll.revision({
          transformFilename: (file, hash) => {
            const relative = file.relative.replace('\\', '\/');
            const reg = new RegExp(`/public/css/${relative}\\?v=[a-f0-9]{10}`, 'g');
            const target = `/public/css/${relative}?v=${hash.substr(2, 10)}`;
            // console.log(reg, target);
            keys.push({ reg, target });
            return file.revFilenameOriginal + file.revFilenameExtOriginal; // 3410c.filename.ext
          },
        }))
        .pipe(gulp.dest('dist/css'))
        .on('error', reject)
        .on('end', resolve);
    }),
    new Promise((resolve, reject) => {
      gulp.src('dist/js/**/*')
        .pipe(RevAll.revision({
          transformFilename: (file, hash) => {
            const relative = file.relative.replace('\\', '\/');
            const reg = new RegExp(`/public/js/${relative}\\?v=[a-f0-9]{10}`, 'g');
            const target = `/public/js/${relative}?v=${hash.substr(2, 10)}`;
            // console.log(reg, target);
            keys.push({ reg, target });
            return file.revFilenameOriginal + file.revFilenameExtOriginal; // 3410c.filename.ext
          },
        }))
        .pipe(gulp.dest('dist/js'))
        .on('error', reject)
        .on('end', resolve);
    }),
  ]).then(() => {
    const pipess = [];
    keys.forEach(item => {
      pipess.push(replace(item.reg, item.target));
    });
    pipess.push(gulp.dest('app/view'));
    pipe(gulp.src([ 'app/view/**/*' ]), pipess);
  });

gulp.task('default', [ 'version' ], () => {

});

他这种写法感觉又复杂了些，查了gulp-rev-all和gulp-rev的区别，前者好用，我就想用gulp实现的方式生成manifest.json的方式然后再用gulp-rev-collector去替换，但是失败！好吧

如果大神有什么好的方法，请赐教，有时间的话会研究webpack如何加版本号的