karchinkong / Blogsystem

个人博客 iView + Express + Mysql
6 stars 0 forks source link

Gulp 添加版本号 #4

Open karchinkong opened 6 years ago

karchinkong commented 6 years ago

添加任务,gulpSequence(同步执行任务) 分别执行revCss,revJs,revHtml3个任务

gulp.task('addVersion', function(done) {

    gulpSequence('revCss', 'revJs', 'revHtml')(function() {});

});

添加为css文件添加版本号的任务

gulp.task('revCss', function() {
    return gulp.src('resources/stylesheets/*.css') 目标路径
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('resources/rev/css')); 生成manifest文件的路径
});

添加为js文件添加版本号的任务

gulp.task('revJs', function(){
    return gulp.src('resources/compress/javascripts/*/*.js')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('resources/rev/js'));
});

所有html引用的js,css文件根据上述生成的manifest.json匹配,匹到对应的js和css文件在文件名的后面添加版本号(?v=e2sz2ab)

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

要想在每个js,css文件后面加上?v=abxswjs 这样的版本号格式需要修改一下以下的文件

首先打开node_modules\gulp-rev\index.js 第135行 改为

manifest[originalFile] = originalFile + '?v=' + file.revHash;

打开node_modules\gulp-rev\node_modules\rev-path\index.js 第9行 改为

return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

打开node_modules\gulp-rev-collector\index.js 第40行 改为

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

最后执行一次addVersion这个任务,即可完成上述效果

karchinkong commented 5 years ago

TestComment!

karchinkong commented 5 years ago

AgainTestComment!!!