由于js和css的缓存问题，所以，希望在html上给js和css添加上版本号。
常见的用法是使用gulp-rev和gulp-rev-collector进行操作。使用这两个插件，得到的效果如下图所示：
但是，我们希望的格式是这种：
有大神给出了解决办法，参见如下链接：
此篇文章中的修改行数，会随着插件的更新而发生变化，大家可以搜索一下，基本上就是了。
可是随后又出现一个问题，如果重复执行添加版本号的操作，版本号会重复追加到链接后面：
<link rel="stylesheet" type="text/css" href="./css/main.v2.css?v=5e925faf8e?v=5e925faf8e" />
于是，顺着上面作者的思路，我去修改了gulp-rev-collector的源码，修改的目录是：
修改了两处代码：
第一处：修改了函数 escPathPattern，代码修改为：
function escPathPattern(pattern) {
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;
}
第二处：修改了函数revCollector中的for(var key in manifest)下面的第一个条件判断，代码如下：
if (opts.replaceReved) {
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
);
}
保存之后，就可以得到想要的结果了。下面附上我的gulpfile.js部分代码：
gulp.task("css", function(){
return gulp.src(["./**/*.css","./js/**/*.css"])
.pipe(rev())
.pipe(gulp.dest("./dist/css/"))
.pipe(rev.manifest())
.pipe(gulp.dest("./dist/css/"));
});
gulp.task("js", function(){
return gulp.src(["./**/*.js"])
.pipe(rev())
.pipe(gulp.dest("./dist/js/"))
.pipe(rev.manifest())
.pipe(gulp.dest("./dist/js/"));
});
//v2下面全部的aspx添加版本号
gulp.task("rev",function(){
return gulp.src(['./dist/**/*.json', "./*.aspx"])
.pipe(
revCollector({
replaceReved: true,
dirReplacements: {
}
}))
.pipe(gulp.dest("./"));
});
我们公司的开发环境是vs，在用gulp修改版本的时候，会发生乱码的情况，经过对编码方式的查看发现，原本是utf-8有签名的编码，添加完版本号之后，变成了utf-8无签名的编码方式，经过一番查看，找到了解决办法，如下：
修改代码：
全局搜索mutables.forEach(，将其代码修改为：
mutables.forEach(function (file) {
if (!file.isNull()) {
var src = file.contents.toString('utf8');
changes.forEach(function (r) {
src = src.replace(r.regexp, r.replacement);
});
//src = "EF BB BF" + src;
var content = new Buffer(src, "utf8");
//加一步判断操作，判断是否是带bom的文件
var bomTag = ["239", "187", "191"];
if(!(content[0].toString(16).toLowerCase() == "ef" && content[1].toString(16).toLowerCase()=="bb" && content[3].toString(16).toLowerCase()=="bf")){
content = Buffer.concat([new Buffer(bomTag), content], content.length + 3);
}
file.contents = content;
}
this.push(file);
}, this);
修改里面的逻辑为，先判断文件头部是否带有“EF BB BF”（BOM标识），如果没有，则追加到文件头部。