关于使用gulp-rev的疑惑

前端发布文件后，为了防止缓存问题就有了version号，但是每次手动去修改version号又比较麻烦，所以在文件编译的时候在文件后面附带了hash值来防止缓存的问题，因为接收公司项目的时候，整个项目都是用gulp的，如果改用webpack很多东西都需要去单独修改，需要耗费大量时间，所以使用了gulp-rev插件。

在githuab上面寻找了一下，官方文档是这么写的

//安装
npm install --save-dev gulp-rev
//使用
const gulp = require('gulp');
const rev = require('gulp-rev');

gulp.task('default', () =>
// by default, gulp would pick `assets/css` as the base,
// so we need to set it explicitly:
 gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
 .pipe(gulp.dest('build/assets'))
 .pipe(rev())
 .pipe(gulp.dest('build/assets'))
 .pipe(rev.manifest({
 base: 'build/assets',
 merge: true // merge with the existing manifest if one exists
 }))
 .pipe(gulp.dest('build/assets'))
);

生成的manifest.json文件如下

{
    "css/unicorn.css": "css/unicorn-d41d8cd98f.css",
    "js/unicorn.js": "js/unicorn-273c2c123f.js"
}

按说照官网上面写的就可以了，多个任务都输出到同一个json文件里面，想法很美好，但是,但是,但是,重要的事情说三遍，事情不是这样子的，一般情况下小项目直接按照源代码来是可以的，but稍大点的项目就不行了，比如css和js文件需要合并压缩啊,css需要两份，一份在页面，一份在移动。。。。。。

来一段代码

gulp.task('concat' ,function() {
    gulp.src(appCssSrc)
        .pipe(concat('appcss.css'))
        .pipe(gulp.dest('dev/css'));
    gulp.src(appjsSrc)
        .pipe(concat('apptool.js'))
        .pipe(gulp.dest('dev/js'));
    gulp.src(['src/js/apporder.js','src/js/appsale.js'])
        .pipe(gulp.dest('dev/js'));
});
//appCssSrc和appjsSrc为项目文件的路径

在这里我把三种任务组合到了一起，然后我按照官网代码撸了一遍

gulp.task('concat' ,function() {
 gulp.src(appCssSrc,{base: 'dev'})
 .pipe(concat('appcss.css'))
 .pipe(rev())
 .pipe(gulp.dest('dev/css'))
 .pipe(rev.manifest({
 merge: true
 }))
 .pipe(gulp.dest('dev'))
gulp.src(appjsSrc,{base: 'dev'})
 .pipe(concat('apptool.js'))
 .pipe(rev())
 .pipe(gulp.dest('dev/js'))
 .pipe(rev.manifest({
 base: 'dev',
 merge: true
 }))
 .pipe(gulp.dest('dev'))
gulp.src(['src/js/apporder.js','src/js/appsale.js'],{base: 'dev'})
 .pipe(rev())
 .pipe(gulp.dest('dev/js'))
 .pipe(rev.manifest({
 base: 'dev',
 merge: true
 }))
 .pipe(gulp.dest('dev'))
});

结果根目录下多了一个json文件，如图
关于使用gulp-rev的疑惑

这明显不是咱们想要的结果吧，明明我只想要一个，为什么出来了多个呢？很遗憾，本人才疏学浅，解决不了这个疑问，如果有大神指明一下感激不尽哪！！！

所以我又开拓了一下思维，既然这样，为什么不在合并完成后再去获取合并完成的文件在进行这一步操作呢？想到做到，然后付诸实践以后发现可以，贴一下代码段

gulp.task('concat' ,function() {
    gulp.src(appCssSrc)
        .pipe(concat('appcss.css'))
        .pipe(gulp.dest('dev/css'))
    gulp.src(appjsSrc)
        .pipe(concat('apptool.js'))
        .pipe(gulp.dest('dev/js'))
    gulp.src(['src/js/apporder.js','src/js/appsale.js'])
        .pipe(gulp.dest('dev/js'))
});
gulp.task('rev-all',['concat'],function() {
return gulp.src(['dev/css/appcss.css','dev/js/apptool.js','dev/js/apporder.js','dev/js/appsale.js'])
        .pipe(rev())
        .pipe(gulp.dest('dev/js'))
        .pipe(rev.manifest('rev-index.json'))
        .pipe(gulp.dest('dev'));
})

这样虽然可以实现自己想要的效果，但是问题又来了，rev-all确实是在concat任务执行完成以后才执行，但是可能文件还有没有被合并或者压缩完，虽然任务执行完了，但是文件还没有到位，这时候，下面的任务读取不到压缩合并完成后的文件，除非你执行二次或者中间添加一些别的任务，能把这段时间撑过去，这就是最坑的一点，我暂时还没有找到最好的方案。希望大家看到以后提提意见或建议什么的，能把这个坑给填上！！

秒客网

关于使用gulp-rev的疑惑

相关文章