效果如下图每次更新css，js就自动更新对应的版本号
1 文件结构：
2 view 文件index.html,(test.html仿写index.html)
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" type="text/css" href="../css/base.css">
<link rel="stylesheet" href="../css/index.css">
<script src="../js/pages/index.js"></script>
</head>
<body>
<div class="mian">213245345</div>
</body>
</html>
3 js/pages/index.js
function ss(){
alert("dfgsdsdfsdf11222wer手动阀手动阀f");
}
ss();
4 css文件 index.css,(base.css仿写index.css)
.mian{
width: 100%;
height: 100%;
overflow: hidden;
background: #f90;
color: red;
}
.a{
font-size: 3px;
}
5 gulpfile.js 文件：
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
assetRev = require('gulp-asset-rev'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'webapp/**/*.css',
jsSrc = 'webapp/**/*.js';
//为css中引入的图片/字体等添加hash编码
// gulp.task('assetRev', function(){
// return gulp.src(cssSrc) //该任务针对的文件
// .pipe(assetRev()) //该任务调用的模块
// .pipe(gulp.dest('src/js')); //编译后的路径
// });
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssSrc)
.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'));
});
//Jsp替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'webapp/view/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('webapp/dist'));
});
//task合并顺序执行
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
done);
});
// gulp.task('default', ['dev']);
//改变相应文件之后自动进行更新版本号
gulp.task('watch', function () {
gulp.watch([
cssSrc,
jsSrc
], ['dev']);
});
gulp.task('default', ['dev','watch']);
1.打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打开node_modules\rev-path\index.js
10行
return modifyFilename(pth, (filename, ext) =>${filename}-${hash}${ext});
更新为: return modifyFilename(pth, (filename, ext) =>${filename}+${ext});
3.打开node_modules\gulp-rev-collector\index.js
var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新为:
var cleanReplacement = path.basename(json[key]).split('?')[0];
这样就完成版本号更新了
