gulp构建版本号在html失效

Question

目前的问题是，html文件没有带版本号，rev json里面能看到

rev-manifest.json

{
  "cas.css": "cas.css?v=2ddef3cfbd"
}

rev-manifest.json

{
  "cas.js": "cas.js?v=a5a6013133"
}

'use strict';

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');           // 图片压缩
var uglify = require("gulp-uglify");               // js压缩
var babel = require("gulp-babel");                 // babel
var minifyCss = require("gulp-minify-css");        // css文件压缩
var minifyHtml = require("gulp-minify-html");      // html文件压缩
var htmlreplace = require("gulp-html-replace");    // html引入文件替换
var rev = require("gulp-rev");                     // gulp加版本号
var revCollector = require("gulp-rev-collector");  // gulp加版本号

var clean = require('gulp-clean');


// cas-login js压缩
gulp.task('loginJsMin', async function () {
    await gulp.src('src/cas-login/cas.js')
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest('dist/cas-login'))
});

// cas-login js复制
gulp.task('loginJsCopy', async function () {
    await gulp.src('src/cas-login/*.min.js')
        .pipe(gulp.dest('dist/cas-login'));
});

// cas-login css压缩
gulp.task('loginCssMin', async function () {
    await gulp.src('src/cas-login/*.css') // 要压缩的css文件
        .pipe(minifyCss()) //压缩css
        .pipe(gulp.dest('dist/cas-login'))
});

// cas-login html压缩
gulp.task('loginHtmlMin', async function () {
    await gulp.src('src/cas-login/*.html') // 要压缩的html文件
        .pipe(minifyHtml()) //压缩
        .pipe(gulp.dest('dist/cas-login'));
});


// cas-login 图片压缩
gulp.task('loginImagesMin', async function () {
    await gulp.src('src/cas-login/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/cas-login/images'));
});

// cas-login js hash
gulp.task('loginJsHash', async function () {
    await gulp.src('dist/cas-login/cas.js')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/cas-login/js'));
});

// cas-login css hash
gulp.task('loginCssHash', async function () {
    await gulp.src('dist/cas-login/*.css') // 要压缩的css文件
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/cas-login/css'));
});

gulp.task('loginRev', function() {
    return gulp.src(['rev/cas-login/**/*.json', 'dist/cas-login/*.html'])
        .pipe(revCollector({
            replaceReved: true    //允许替换, 已经被替换过的文件
        }))
        .pipe(gulp.dest('dist/cas-login'));
});

// Build cas-login
gulp.task('login-build',
    gulp.series('loginJsMin', 'loginJsCopy', 'loginCssMin', 'loginImagesMin','loginHtmlMin', 'loginJsHash', 'loginCssHash', 'loginRev', done => {
    done();
}));

想解决的是 css,js改动之后每次gulp之后，都能在html生成最近的版本号带上

Answer 1

装个插件，gulp build 时动态替换版本号

var strReplace = require('gulp-string-replace');

gulp.task('replaceVersion', function () {
    var version = new Date().getTime();
    
    gulp.src(['./*.js']).pipe(strReplace(/\d{13}/g, version)).pipe(gulp.dest('./js/'));
    gulp.src(['./*.html']).pipe(strReplace(/\d{13}/g, version)).pipe(gulp.dest('../'));
});