gulp为css,js添加版本号

gulp为css,js添加版本号

由于cdn缓存，更改样式后会有一段时间不生效，解决方法就是给css,js加上版本号效果如下：

1.安装gulp插件

npm install --save-dev gulp-rev (version:9.0.0)
npm install --save-dev gulp-rev-collector (version:1.3.1)
npm install --save-dev run-sequence (version:2.2.1)

2.修改gulpfile.js文件

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');
    ...

//此处省略sass等配置
...


//定义css、js源文件路径
var cssSrc = 'dist/**/*.css', //dist下css所有文件
    jsSrc = 'dist/**/*.js' ; //dist下所有js文件

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

//JS生成文件hash编码并生成rev-manifest.json文件名对照映射
gulp.task('revJs',function(){
    return gulp.src(jsSrc)
           .pipe(rev())
           .pipe(rev.manifest)
           .pipe(gulp.dest('dist/rev/js'));
})

//Html替换css、js版本
gulp.task('revHtml',function(){
    return gulp.src(['dist/rev/**/*.json','dist/*.html'])
           .pipe(revCollector())
           .pipe(gulp.dest('dist'));
})

//开发构建
gulp.task('dev',function(done){
    condition = false;
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
})
gulp.task('default',['sass','html','images','watch','scripts','dev']);

3.修改node_module里相关配置文件

（1）更改gulp-rev文件（node_modules--->gulp-rev--->index.js）

将 manifest[originalFile] = revisionedFile;
改为 manifest[originalFile] =  originalFile + '?v=' + file.revHash;

（2）更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

将 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

改为 var cleanReplacement =  path.basename(json[key]).split('?')[0];

（3）更改rev-path文件（node_module--->gulp-rev--->node_module--->rev-path--->index.js）

将 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

（4）更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

    将  regexp: new RegExp( prefixDelim + pattern, 'g' ),
    改为 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),

然后在项目目录下执行gulp 即可自动为css,js文件生成版本号

posted @ 2019-01-10 11:25 我在等风也等你啊 阅读( ...) 评论( ...) 编辑 收藏