使用gulp增长已经存在的静态文件的版本号

废话：好多后期要给工程增长版本号，清理浏览器缓存，因此使用这个鬼来搞一把
固然这里须要你用nodeJS的npm工具安装一些东西
不会nodejs,你先百度一把！

准备工做：你须要用npm包安装这些插件。

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence

固然我第一次安装失败了，启动不了gulp;

因而，我用了全局安装gulp 命令为：

npm -g install gulp

我用的win7，因此在CMD中运行一把就发现安装成功了

好了，开始为咱们工程增长版本号

第一步：打开node_modules\gulp-rev\index.js

找到下面的代码，将注释掉的改成下面的内容，此处为改变返回的版本号格式

/*manifest[originalFile] = revisionedFile;*/
manifest[originalFile] = originalFile + '?v=' + file.revHash;

第二步：打开node_modules\rev-path\index.js 

找到下面的代码，将注释掉的改成下面的内容，此处为改变关联的下划线（老姿找了半天找不到这个rev-path，是由于之前的gulp-rev插件将这部分集成在了里面，然后续的版本将rev-path从gulp-rev里抽离出来了，因此要在项目目录的node_modules里找这个插件，咱们不须要手动安装，这是gulp-rev的依赖，npm会自动安装！）

/*return filename + '-' + hash + ext;*/
return filename + ext;

第三步：打开node_modules\gulp-rev-collector\index.js

找到下面的代码，将注释掉的改成下面的内容，此文件最好改三个地方

一处：

/*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
          isRev = 0;
  }*/

  if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
          isRev = 0;
  }

二处：

//return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
	//禁止重复添加版本号
    var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
    rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
    return rp;

三处：

/*patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) )
                        );*/

 patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
                        );

以上都作过多了，就能够建立一个文件，固然这个目录最好建立在工程名下第一级目录

例如个人目录为：

第四步：建立一个gulpfile.js文件所在目录以下。

内容为：

//引入gulp和gulp插件
var gulp = require('gulp'),
  assetRev = require('gulp-asset-rev'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector');
//定义css、js源文件路径而且能够传入多个不一样的文件夹
var cssSrc = 'css/*.css',
  jsSrc = 'js/lib/config.js',
  jsGA = 'js/lib/GA.js',
  baseTrend = 'js/lib/pk10BaseTrend.js',
  jsSrcc = 'js/loacal/**/*.js',
  ico = 'img/icon/*.ico';
//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([jsSrcc,jsSrc,jsGA,baseTrend])
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/js'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revIco', function(){
  return gulp.src(ico)
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/ico'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['index.html','*/**/*.*'])//将全部文件打包到新文件下
    .pipe(revCollector())
    .pipe(gulp.dest('KJW_HTML'));
});
//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //该任务针对的文件
   .pipe(assetRev()) //该任务调用的模块
   .pipe(gulp.dest('KJW_HTML/css')); //编译后的路径
});
//如下是拷贝静态图片和声音
gulp.task('copyimg',  function() {
  return gulp.src(['img/**/*'])
    .pipe(gulp.dest('KJW_HTML/img'))
});
gulp.task('copyLibimg',  function() {
  return gulp.src(['js/lib/finishAnimation/*/*.*'])
    .pipe(gulp.dest('KJW_HTML/js/lib/finishAnimation'))
});
gulp.task('copyMedia',  function() {
  return gulp.src(['media/*'])
    .pipe(gulp.dest('KJW_HTML/media'))
});
//开发构建
gulp.task('default', function (done) {
  condition = false;
  runSequence(    //说明，用gulp.run也能够实现以上全部任务，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时须要串行执行（顺序执行）这些任务，故使用了runSequence.
    ['revCss'],
    ['revJs'],
    ['revIco'],
    ['revHtml'],
    ['assetRev'],
    ['copyimg'],
    ['copyLibimg'],
    ['copyMedia'],
    done);
});

ok,最后一下就直接运行就能够了

D:\DFF\PROJECT\KJW_HTML>gulp
[19:41:14] Using gulpfile D:\DFF\PROJECT\KJW_HTML\gulpfile.js
[19:41:14] Starting 'default'...
[19:41:14] Starting 'assetRev'...
[19:41:14] Finished 'assetRev' after 123 ms
[19:41:14] Starting 'revCss'...
[19:41:14] Finished 'revCss' after 25 ms
[19:41:14] Starting 'revJs'...
[19:41:14] Finished 'revJs' after 75 ms
[19:41:14] Starting 'revIco'...
[19:41:14] Finished 'revIco' after 3.06 ms
[19:41:14] Starting 'revHtml'...
[19:41:16] Finished 'revHtml' after 1.34 s
[19:41:16] Finished 'default' after 1.58 s

D:\DFF\PROJECT\KJW_HTML>

你运行完后就能够看到全部静态文件后面都有版本号了，由于有些不用改的资源目录不用变，如jq和其余功能插件

加完以后：

 

摘要:  更多前端学习请加群：JS/NDEJS/HTML5/（前端）458633781 或关注心魅体公众号：ilittlekiss