gulpfile.js文件
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定义css、js文件路径，是本地css,js文件的路径，可自行配置
var cssUrl = 'css/*.css',
jsUrl = 'js/*.js';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(cssUrl)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsUrl)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Html更换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', '*.html']) /*WEB-INF/views是本地html文件的路径，可自行配置*/
.pipe(revCollector())
.pipe(gulp.dest('')); /*Html更换css、js文件版本,WEB-INF/views也是和本地html文件的路径一致*/
});
//开发构建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
done);});
gulp.task('default', ['dev']);
修改映射表中 属性值的格式
打开node_modules\gulp-rev\index.js
第135行 manifest[originalFile] = revisionedFile;
修改为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开node_modules\gulp-rev-collector\index.js
第40行 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
修改为: var cleanReplacement = path.basename(json[key]).split('?')[0];
避免引用 URL 中的版本号累积：dist/js/all.min.js?v=6e4cfcf9de => dist/js/all.min.js?v=54a62a8eb6?v=6e4cfcf9de
打开node_modules\gulp-rev-collector\index.js
第173行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
修改为: regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),
更新效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="/css/style.css?v=a4906c709c">
</head>
<body>
<script src="/js/index.js?v=ff66e951de" charset="utf-8"></script>
</body>
</html>
网友评论