给asp.net静态资源添加版本号

给aspx的引用静态资源添加版本号,强制刷新客户浏览器的缓存的js,css

先安装需要的插件

npm init
npm install --save-rev gulp-rev gulp-rev-collector gulp-convert-encoding run-sequence

原生的插件直接使用是替换js文件名的,为了实现  xxx.xx?v=md5  的效果,需要修改几处地方

1.node_modules\gulp-rev\index.js

原: manifest[originalFile] = revisionedFile; 
更新后: manifest[originalFile] = originalFile + '?v=' + file.revHash;

2.nodemodules\rev-path\index.js

原: return filename + '-' + hash + ext; 
更新后: return filename + ext;

3.node_modules\gulp-rev-collector\index.js

原: let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新后: let cleanReplacement = path.basename(json[key]).split('?')[0];

为了实现可以重复执行,避免出现 xx.js?v=md5?v=md5 的情况

修改node_modules\gulp-rev-collector\index.js

原: regexp: new RegExp(prefixDelim + pattern, 'g'),
更新后: regexp: new RegExp(prefixDelim + pattern + '(\\?v=\\w{10})?', 'g'),

然后目录下创建gulpfile.js

'use-strict';
//引入gulp和gulp插件
var gulp = require('gulp'),
    convertEncoding = require('gulp-convert-encoding'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');

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


//CSS编码映射文件
gulp.task('revCss', function() {
    return gulp.src(cssMinSrc)
        .pipe(rev())　　 //替换md5
        .pipe(rev.manifest()) //生成rev-manifest.json
        .pipe(gulp.dest('./dist/css')); //保存rev-manifest.json  
});


//js编码映射文件
gulp.task('revJs', function() {
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('./dist/js'));
});

//替换css、js文件版本
gulp.task('revAspx', function() {
    return gulp.src(['./dist/**/*.json', aspSrc])
        .pipe(revCollector({
            replaceReved: true,
            dirReplacements: {}
        }))
        //asp.net编码格式为uft8+BOM需要转换,否则乱码
        .pipe(convertEncoding({ iconv: { decode: {}, encode: { addBOM: true } }, to: "utf8" })) 
        .pipe(gulp.dest('./')); //覆盖原文件.
});



gulp.task('default', function(done) {
    runSequence(
        'revJs',
        'revAspx',
        done);
});

运行

gulp