css文件和js文件版本号如何写在一个rev-manifest.json文件里面

Question

我用gulp-rev插件来生成静态文件版本号，然后它会把版本号写到rev-manifest.json配置文件里。

现在问题是。css文件和js文件版本号如何写在一个rev-manifest.json文件里面eg:

{
    "css/a.css": "css/a-d41d8cd98f.css",
    "css/b.css": "css/b-d41d8cd98f.css",
    ...
    "js/a.js": "js/a-273c2cin3f.js"
    "js/b.js": "js/b-273c2cin3f.js"
}

我下面这样写，静态资源会生成版本号，但只有第一个版本号会写入json文件，其他不会。

gulp.task('jsmin1', function() {
     
       del(['./dist/js/vendor/jquery.all.min-*.js'], function (err) {});

      return gulp.src([
           './dist/js/vendor/jquery/jquery.min.js',
           './dist/js/vendor/jquery/ui/jquery-ui.min.js',
            './dist/js/vendor/libs/bootstrap.min.js'
        ])
        .pipe(concat('jquery.all.js'))
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/vendor/'))  
        .pipe(rev.manifest({
            // merge: true // merge with the existing manifest (if one exists)
        }))
         .pipe(gulp.dest('./dist/rev/js/')); 
});


gulp.task('jsmin2',['jsmin1'], function() {
      // angularjs 必要的组件
      del(['./dist/js/vendor/angular.all.min-*.js'], function (err) {});
     return gulp.src([
              './dist/js/vendor/angular/angular.js',   
               './dist/js/vendor/modules/ng-table/ng-table.min.js',
               './dist/js/vendor/angular/angular-md5/angular-md5.js'
        ])
        .pipe(concat('angular.all.js'))
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/vendor/'))  
        .pipe(rev.manifest({
            // merge: true // merge with the existing manifest (if one exists)
        }))
         .pipe(gulp.dest('./dist/rev/js/')); 

});

请问怎么配置可以写在1个json文件里面类似这样的：

{
    "css/a.css": "css/a-d41d8cd98f.css",
    "css/b.css": "css/b-d41d8cd98f.css",
    ...
    "js/a.js": "js/a-273c2cin3f.js"
    "js/b.js": "js/b-273c2cin3f.js"
}

谢谢！

Answer 1

事实上，如果你用gulp.dest为rev-manifest.json指定了另外的存储的路径的话，那么仅仅配置merge:true是不起作用的。

查看gulp-rev的源码，会发现不同的gulp任务可以生成同一个rev-manifest.json文件，是因为如果设置了merge: true的话，程序会先尝试读取这个文件，如果存在，则进行追加和更改。但是因为用gulp.dest指定存储路径是在生成rev-manifest.json的后一步，在生成文件时，程序并不知道你为这个文件指定的路径，它只会去判断gulpfile.js当前目录下有没有这个文件。此种情况下，这个文件是没有的。

正确的写法是，给rev.manifest()的参数增加一个path项，然后再gulp.dest("./")

//...
.pipe(rev.manifest({
         path: '../public/build/rev-manifest.json',
         merge: true
   }))
.pipe(gulp.dest('./'));

Answer 2

gulp-rev manifest配置项merge设置为true

……

.pipe(rev.manifest({
    merge: true
}))

……

Answer 3

楼上正解，就是这么配置