基于 gulp 的自动化构建之“静态资源版本管理”--2017年12月"gulp-rev"版本8.1.0

    我安装完的版本号如下
    "gulp-rev": "^8.1.0",
    "gulp-rev-collector": "^1.2.3",

根据前人的经验，和解决方法，发现12月的版本又有一些不同，为了让大家更快的修改，发布一下我的修改测试后的处理

以下为摘录修改

在静态资源版本管理方面，以前用过两种方案（都是通过后端实现） ：第一种：获取文件最新修改时间。可以实现比较好的版本管理效果，但客户端每一次访问一个资源文件，服务器都会动态读取一次该文件的最新修改时间。对这种方案，头脑有限，暂时无法评估其对性能和访问速度的影响。但就版本管理效果来说，更倾向于这一种。第二种：设置日期常量。版本管理效果非常差。

目前已实现的新方案如下：
在构建阶段计算静态资源的 hash 值，并将该值以参数的形式追加到de><link>de>、de><script>de>中的 URL。
大家需要知道的是，如果某个文件发生了修改，我这里会自动修改引用了该文件的各个模块的view文件。
此方案可实现真正的版本管理效果，并且可以确定对性能和访问速度无影响。

1. 默认方案：

如果使用de >gulp-revde> + de >gulp-rev-collectorde>，默认效果如下:

"/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.css文件经过三次更新之后，会累积一下三个文件：

style-a3654c03aa.cssstyle-98c5f098bd.cssstyle-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）de >gulp-revde>根据文件内容计算生成一个 hash 字符串，如：de >98c5f098bdde>
（2）de >gulp-revde>生成一个映射表，列出映射关系

{  "all.min.js": "all.min.js?v=98c5f098bd"}

（3）de>gulp-rev-collectorde>根据该映射表 将de><link>de>、de><script>de>URL中的文件名de>all.min.jsde>替换为de>all.min.js?v=98c5f098bdde>
如何修改？
需要对de>gulp-revde>和de>gulp-rev-collectorde>进行修改。修改如下：
修改映射表中 属性值的格式：打开de>node_modules\gulp-rev\index.jsde>

第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 值加入到文件名中，现要文件名保持不变）：
打开de >node_modules\rev-path\index.jsde>

第9行 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);修改为: return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

打开de >node_modules\gulp-rev-collector\index.jsde>

第40行 var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );修改为: var cleanReplacement =  path.basename(json[key]).split('?')[0];

避免引用 URL 中的版本号累积：de >
dist/js/all.min.js?v=6e4cfcf9dede> => de >dist/js/all.min.js?v=54a62a8eb6?v=6e4cfcf9dede>
打开de >node_modules\gulp-rev-collector\index.jsde>

第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(['./Data_Links/css/**/*.css'])        .pipe(rev())        //.pipe(gulp.dest('./Data_Links/dist/css'))        .pipe(rev.manifest({            path: 'rev-manifest-css.json'        }))        .pipe(gulp.dest('./Data_Links/rev'));});gulp.task('css', ['css-rev'], function () {    console.log('开始--修改 css 引用链接的资源版本号...');    return gulp.src(['./Data_Links/rev/rev-manifest-css.json', './src/tpls/**/*.html'])        .pipe(revCollector())        .pipe(gulp.dest('./Data_Links/tpls'));});gulp.task('js-rev',['css'],function () {    console.log('开始--计算 js 资源版本号，并生成映射表...');    return gulp.src(['./Data_Links/js/**/*.js'])        .pipe(rev())        // .pipe(gulp.dest('./Data_Links/dist/js'))        .pipe(rev.manifest({            path: 'rev-manifest-js.json'        }))        .pipe(gulp.dest('./Data_Links/rev'));});gulp.task('js', ['js-rev'], function () {    console.log('开始--修改 js 引用链接的资源版本号...');    return gulp.src(['./Data_Links/rev/rev-manifest-js.json', './Data_Links/tpls/**/*.html'])        .pipe(revCollector())        .pipe(gulp.dest('./Data_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('./Data_Links/dist/js'))