gulp插件-gulp-rev和gulp-rev-collect

1.gulp-rev: 为静态文件随机添加一串hash值, 解决cdn缓存问题, a.css --> a-d2f3f35d3.css
API:
rev.manifest.json: 生成源文件和添加hash后文件的映射

安装: npm install --save-dev gulp-rev

使用:
var gulp = require('gulp')
var rev = require('gulp-rev')

gulp.task('rev', function(){
    gulp.src('src/*.css')
          .pipe(rev())//添加hash后缀
          .pipe(gulp.dest('dist/css'))//移动到dist/css
          .pipe(rev.manifest())//生成文件映射
          .pipe(gulp.dest('rev/css'))//将映射文件导出到rev/css
})

gulp-rev插件只能添加后缀, 不能讲html里的路径替换, 如果想要替换路径, 就需要gulp-rev-collector

2.gulp-rev-collector: 根据rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径

安装: npm install --save-dev gulp-run-collector

使用:
var gulp = require('gulp');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var runSequence = require('run-sequence');
var clean = require('gulp-clean')

gulp.task('css', function() {
    return gulp.src('src/css/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});

gulp.task('js', function() {
    return gulp.src('src/js/*.js')
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});

gulp.task('rev', function() {
    return gulp.src(['rev/**/*.json', 'src/app/*.html'])
        .pipe(revCollector({
            replaceReved: true,//允许替换, 已经被替换过的文件
            dirReplacements: {
                'css': '/dist/css',
                'js': '/dist/js'
            }
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function(){
    return gulp.src(['dist', 'rev'])
        .pipe(clean());
});
gulp.task('build', function(cb) {
    runSequence('clean', ['css', 'js'], 'rev', cb);
});

对插件源码做一些小的修改, 就可以将a-5da2910089.css模式转变成更加方便的-5da2910089模式

第一步: 进入/node_modules/gulp-rev/index.js修改代码:
将return through.obj((file, enc, cb) => {
        // Ignore all non-rev'd files
        if (!file.path || !file.revOrigPath) {
            cb();
            return;
        }

        const revisionedFile = relPath(path.resolve(file.cwd, file.base), path.resolve(file.cwd, file.path));
        const originalFile = path.join(path.dirname(revisionedFile), path.basename(file.revOrigPath)).replace(/\\/g, '/');

        manifest[originalFile] = revisionedFile;//这段删除
                manifest[originalFile] = originalFile + '?v=' + file.revHash;//这段添加
        cb();
    }


第二步: 进入/node_modules/rev-path/index.js修改代码:
将第一个函数中的:return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`); 里边的-${hash}删掉;
将第一个函数中的:return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '')  + ext); 里边的.replace(new RegExp(`-${hash}$`), '') 删掉;

第三步: 进入/node_modules/gulp-rev-collector/index.js修改代码:(更改两处)
1) 140 和 160行
      // regexp: new RegExp(  dirRule.dirRX + pattern, 'g' ),//删除这段
      regexp: new RegExp( dirRule.dirRX  + pattern+'(\\?v=\\w{10})?', 'g' ),//添加这段
 // regexp: new RegExp( prefixDelim + pattern, 'g' ),//删除这段
  regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),//添加这段

2)  40行
   // var cleanReplacement =  path.basename(json[key]).replace(new RegExp(   opts.revSuffix ), '' );//删除
    var cleanReplacement = path.basename(json[key]).split('?')[0];//添加