gulp-自动添加版本号

阅读: 2298    发布时间: 2018-02-19 12:05:45

我们开发中可能经常遇到这种问题,bug已经修改,但是由于用户端有缓存,导致bug依然存在,我们需要通过更改文件的版本号,来去除缓存的影响。

我们希望的版本号形式一般是这样的,文件名称+“?v=”+版本号

<link rel="stylesheet" href="../css/style.css?v=0d83247610">
<script src="../js/index.js?v=61c1ef9f34"></script></br>

安装gulp和相关插件

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

编写gulpfile.js

核心代码如下,其中文件目录根据自己的进行更改

  • 引用插件

var gulp=require('gulp'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    runSequence = require('run-sequence');
  • CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revCss', function(){
    return gulp.src('src/less/**/*.less')
        .pipe(less())
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/css'));
});
  • js生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revJs', function(){
    return gulp.src('src/js/**/*.js')
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/js'));
});
  • html更换css、js文件版本

gulp.task('revHtml', function () {
    return gulp.src(['dist/**/*.json', 'src/pages/*.html']) 
        .pipe(revCollector())
        .pipe(gulp.dest('dist/pages'));  
});
  • 创建任务依次执行这3个任务

gulp.task('rev', function(){
    return runSequence(['revCss'],['revJs'],['revHtml'])
});

这样生成的版本号并不是我们期望的,还需要对gulp插件进行更改

更改插件源码

  • 更改gulp-rev

打开node_modules\gulp-rev\index.js

//更改前,135行
manifest[originalFile] = revisionedFile;

//更改后
manifest[originalFile] = originalFile + '?v=' + file.revHash;
  • 更改rev-path

打开node_modules\rev-path\index.js

//更改前,第9行
return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);

//更改后
return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
  • gulp-rev-collector

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

//更改前,第40行
var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
//更改后
var cleanReplacement =  path.basename(json[key]).split('?')[0];


-END-