我安装完的版本号如下
"gulp-rev": "^8.1.0",
"gulp-rev-collector": "^1.2.3",
根据前人的经验,和解决方法,发现12月的版本又有一些不同,为了让大家更快的修改,发布一下我的修改测试后的处理
以下为摘录修改
在静态资源版本管理方面,以前用过两种方案(都是通过后端实现) : 第一种:获取文件最新修改时间。可以实现比较好的版本管理效果,但客户端每一次访问一个资源文件,服务器都会动态读取一次该文件的最新修改时间。对这种方案,头脑有限,暂时无法评估其对性能和访问速度的影响。但就版本管理效果来说,更倾向于这一种。 第二种:设置日期常量。版本管理效果非常差。
在构建阶段计算静态资源的 hash 值,并将该值以参数的形式追加到
大家需要知道的是,如果某个文件发生了修改,我这里会自动修改引用了该文件的各个模块的view文件。
此方案可实现真正的版本管理效果,并且可以确定对性能和访问速度无影响。
1. 默认方案:
如果使用但是如果用上面方法,实现的是非覆盖式更新:即每次修改文件之后,生成带新版本号的文件,但是带旧版本号的文件不会被删除,长此以往,最后你会发现文件夹里累积了大量带旧版本号的无用文件。例如,style.css文件经过三次更新之后,会累积一下三个文件:"/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/image-35c3af8134.gif"
style-a3654c03aa.css style-98c5f098bd.css style-6e4cfcf9de.css
2. 改良方案:
期望效果:
href="dist/css/style.css" => href="dist/css/style.css?v=1d87bebe" src="dist/js/all.min.js" => src="dist/js/all.min.js?v=98c5f098bd" src="dist/img/image.gif" => src="dist/img/image.gif?v=35c3af8134"
原理:
(1)
(2)
{ "all.min.js": "all.min.js?v=98c5f098bd" }
(3)
de>gulp-rev-collector de>根据该映射表 将 de><link> de>、 de><script> de>URL中的文件名 de>all.min.js de>替换为 de>all.min.js?v=98c5f098bd de> 如何修改?
需要对
de>gulp-rev de>和 de>gulp-rev-collector de>进行修改。修改如下: 修改映射表中 属性值的格式: 打开
de>node_modules\gulp-rev\index.js de>
第134行 manifest[originalFile] = revisionedFile;
修改为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
第164行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
修改为:regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),
修改生成文件的文件名(原来是将 hash 值加入到文件名中,现要文件名保持不变):
打开
打开第9行 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`); 修改为: return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
避免引用 URL 中的版本号累积:第40行 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ); 修改为: var cleanReplacement = path.basename(json[key]).split('?')[0];
dist/js/all.min.js?v=6e4cfcf9de
打开
第139行 regexp: new RegExp( dirRule.dirRX + pattern, 'g' ), 修改为: regexp: new RegExp( dirRule.dirRX + pattern+'(\\?v=\\w{10})?', 'g' ),
3. gulpfile.js 部分配置
var rev = require('gulp-rev'); var revCollector = require('gulp-rev-collector'); gulp.task('css-rev', function () { console.log('开始--计算 css 资源版本号,并生成映射表...'); return gulp.src(['./Da
ta_Links/css/**/*.css']) .pipe(rev()) //.pipe(gulp.dest('./Da ta_Links/dist/css')) .pipe(rev.manifest({ path: 'rev-manifest-css.json' })) .pipe(gulp.dest('./Da ta_Links/rev')); }); gulp.task('css', ['css-rev'], function () { console.log('开始--修改 css 引用链接的资源版本号...'); return gulp.src(['./Da ta_Links/rev/rev-manifest-css.json', './src/tpls/**/*.html']) .pipe(revCollector()) .pipe(gulp.dest('./Da ta_Links/tpls')); }); gulp.task('js-rev',['css'],function () { console.log('开始--计算 js 资源版本号,并生成映射表...'); return gulp.src(['./Da ta_Links/js/**/*.js']) .pipe(rev()) // .pipe(gulp.dest('./Da ta_Links/dist/js')) .pipe(rev.manifest({ path: 'rev-manifest-js.json' })) .pipe(gulp.dest('./Da ta_Links/rev')); }); gulp.task('js', ['js-rev'], function () { console.log('开始--修改 js 引用链接的资源版本号...'); return gulp.src(['./Da ta_Links/rev/rev-manifest-js.json', './Da ta_Links/tpls/**/*.html']) .pipe(revCollector()) .pipe(gulp.dest('./Da ta_Links/tpls')); });
gulp.task在执行时,会先执行[]中的task任务,以上代码只要执行js这个任务,其他3个也会一起执行。
在这里,我采用源文件位置和生成后的位置不同的方式,css加版本号的时候引用的是源文件位,js加版本号的时候引用的是css生成的文件位,这个可以避免一个情况,js在生成的时候源文件中css链接没有版本号,而在生成的时候覆盖css生成的版本号。也可以解决 URL 中的版本号累积的问题?v=xxx?v=xxx
下面的二个被我注释了,会备份css,js如果你需要可以开启。
.pipe(gulp.dest('./Data_Links/dist/css')) .pipe(gulp.dest('./Da ta_Links/dist/js'))