gulp为项目文件添加版本号

先说一下本文讲的是什么。

你一定看过这种带参的css或js文件，每次发布版本，专业一点的话，都会对新版文件打个tag。为了和上一版本的文件做区分，就可以通过这种‘？+参数’ 的方式做版本标记。

注：gulp插件原本的版本号更新方式不是这样，而是直接更改文件名，比如index.css更新为index-abcdefg.css类似这样子，这样一来每次更新版本的同时，还要对文件重命名，然而我们有时可能不想重命名，所以选择“？+参数”方式，不用改变文件原本名称，就像ajax的get方法，末尾加参数，却不影响文件原来在页面中的显示效果（这个例子也不好）。

初学这东西也是百度了几个文档，照着文档来搞，MD百度上文档都一个熊样儿，大家互相抄袭，所以我没有成功，可能是我用的cnpm而是不npm，也可能是版本原因吧，最后通过简单查看了一下npm的包中的index.js源码，问题还是被我解决了。过程如下：

（1）首先还是在项目目录安装包，需要五个包：

1 npm install --save-dev gulp2 npm install --save-dev gulp-rev3 npm install --save-dev gulp-rev-collector4 npm install --save-dev gulp-asset-rev5 npm install --save-dev run-sequence

我的项目目录结构如下：

src就是开发版本啦，dist是即将发布的版本，所以最终的压缩后简化后的代码全都在dist，提交到服务器。

src中有html文件和css、js文件夹，html引入文件路径为相对路径“./css/***.css”，到时一起将html，css，js，font等文件转到dist，路径也不用改变。

rev文件夹的json文件记录版本号，sass与css文件夹同级，sass编译后直接导入css文件夹，再对css文件夹中文件进行版本号添加即可，dist中不再有sass和rev等这些累赘的文件夹。

（2）编写gulpfile.js代码，代码如下：（还附加了一些其他的，可忽略）

var gulp = require('gulp'),    minifyhtml = require('gulp-minify-html'),    sass = require('gulp-sass'),    uncss = require('gulp-uncss'),    assetRev = require('gulp-asset-rev'),    runSequence = require('run-sequence'),    rev = require('gulp-rev'),    revCollector = require('gulp-rev-collector');//压缩html文件并拷贝到dist文件夹中gulp.task('minify-html',function(){    gulp.src('./src/*.html')    .pipe(minifyhtml())    .pipe(gulp.dest('./dist'));});//编译sass成cssgulp.task('sass',function(){    gulp.src('./src/sass/*.scss')    .pipe(sass())    //.pipe(uncss({html:['src/index.html']}))    .pipe(gulp.dest('./src/css'));});//去除css中无用的类（使用框架时作用极为突出）gulp.task('uncss',function(){    gulp.src('./src/css/*.css')    .pipe(uncss({html:['./src/index.html']}))    .pipe(gulp.dest('./src/css'));});/*************************************************添加版本号 正式内容**********************************************/var cssSrc = './src/css/*.css',    jsSrc = './src/js/*.js';//为css中引入的图片/字体等添加hash编码gulp.task('assetRev', function(){    return gulp.src(cssSrc)  //该任务针对的文件        .pipe(assetRev())    //该任务调用的模块        .pipe(gulp.dest('./src/css')); //编译后的路径});//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revCss', function(){    return gulp.src(cssSrc)        .pipe(rev())        .pipe(rev.manifest())        .pipe(gulp.dest('./src/rev/css'));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task('revJs', function(){    return gulp.src(jsSrc)        .pipe(rev())        .pipe(rev.manifest())        .pipe(gulp.dest('./src/rev/js'));});//Html替换css、js文件版本gulp.task('revHtml', function () {    return gulp.src(['./src/rev/**/*.json','./src/*.html'])        .pipe(revCollector())        .pipe(gulp.dest('./src'));});//开发构建，默认任务gulp.task('default', function (done) {    runSequence(    //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.        ['assetRev'],        ['revCss'],        ['revJs'],        ['revHtml'],        done);});

（3）接下来还要修改npm的包中的index.js源文件，因为默认的版本号不是“？+参数”形式：

3.1  打开node_modules\gulp-rev\index.js
       其中的： manifest[originalFile] = revisionedFile;
       更新为： manifest[originalFile] = originalFile + '?v=' + file.revHash;

3.2  打开node_modules\rev-path\index.js
       其中的： return filename + '-' + hash + ext;
       更新为： return filename + ext;

3.3  打开node_modules\gulp-assets-rev\index.js
       其中的： var verStr = (options.verConnecter || "-") + md5;
       更新为：var verStr = (options.verConnecter || "") + md5;
       其次： src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
       更新为：src=src+"?v="+verStr;

3.4  打开node_modules\gulp-rev-collector\index.js
       其中的： if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
       更新为： if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

       其次： regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),

       更改为：regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' )

3.5  如果3.4的node_modules\gulp-rev-collector\index.js中找不到相应更改位置，则：

       找到：  let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

       更改为：  let cleanReplacement =  path.basename(json[key]).split('?')[0];

       其次找到： regexp: new RegExp( prefixDelim + pattern, 'g' ),

       更改为： regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),

上述的3.1,3.2,3.3对应文件中都能找到对应位置更改，3.4中由于版本不同，可能找不到更改位置，所以我自己研究了一番，找到了更改位置并且更改后版本号在每次修改过文件之后更新成功，就总结了3.5。、

（4）接下来再gulp一下task就可以啦，然后可以随意更改一下css或者js文件，查看新的版本号。

json中的版本号与其是相同的

如果发现json中的版本号显示更新成功，但是html中对应的文件链接的版本号不存在或者没有更新，那一定是gulpfile.js中的“revHtml”task中的json和html文件路径写错了，检测不到版本号更新位置，html中自然就不会更新文件版本号。