Gulp 在原html文件上自动化添加js、css版本号的问题

Question

gulpfile.js

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

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


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


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


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


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


gulp.task('default', ['revCss','revJs','revHtml']);

在第一次运行gulp时生成了rev-manifest.json文件但是并没有替换HTML页面上的版本号，在第二次运行时才会把版本号加上去，这是为何？
由于图片太大上传不了这里留一个连接，不明白的请看图片连接
图片

Answer 1

看了下你的构建过程，你应该在执行revHtml任务之前执行完revCss、revJs任务

gulp.task('revHtml', ['revCss','revJs'], function () {
    return gulp.src(['rev/**/*.json', '*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest(''));
});

Answer 2

我想要的预期效果：在原目录结构下html文件代码

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4"><script src="../js/app.js?v=3a0d844594"></script>

有没有不修改源码的方法？？？？