使用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