使用gulp實現版本管理

版本管理的緣由

咱們的項目在瀏覽器運行時，瀏覽器會默認自動緩存靜態資源，好比js,css等文件，以及圖片資源。可是若是咱們在二次開發或者優化以後，再次在瀏覽器打開時，若是這些靜態資源的文件名沒有變量，瀏覽器就會默認調用本地的緩存資源，達到提升瀏覽效率等目的。可是，咱們在這些文件中的更改就不會顯示出來，那麼就沒法實現調試優化的目的。

解決這個問題的辦法，就是修改靜態資源文件名稱，當文件名稱發生改變時，瀏覽器就會再次去服務器拉取資源，從新加載，那就達到了咱們的目的

版本管理的實現辦法

這裏咱們所使用工具是gulp,利用gulp的插件gulp-rev,gulp-rev-collector來實現版本號

使用gulp-rev生成隨機版本號，而後將全部的帶版本號的路徑統一放在json文件中
使用gulp-rev-collector將全部匹配的文件名所有替換成帶版本號的文件名。

版本管理的操做步驟

有node和npm環境

安裝node和npm包環境，這裏不作贅述。

初始化項目

npm init

在當前項目根目錄安裝gulp

npm install --save-dev gulp

安裝插件

npm install --save-dev gulp-rev  //版本號生成插件
npm install --save-dev gulp-rev-collectot  //替換版本號路徑插件
npm install --save-dev gulp-clean  //刪除文件插件

修改gulp插件的配置，目的在後邊說明，你如今照作就好了，不要問爲何

具體代碼的行數可能會隨着版本的更新會有略微幾行的差別，可是具體要修改的內容是不會有很大的變化。目前個人gulp-rev插件的版本是7.1.2，gulp-rev-collector的版本是1.2.2

從根目錄依次打開  node_modules--->gulp-rev--->index.js
找到第144行  manifest[originalFile] = revisionedFile;
   修改成    manifest[originalFile] = originalFile + '?v=' + file.revHash;
   
從根目錄依次打開  node_modules--->gulp-rev-collectot--->index.js
找到40行   let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
    修改成 let cleanReplacement =  path.basename(json[key]).split('?')[0];
    
從根目錄依次打開  node_modules--->rev-path--->index.js
找到40行   return filename + '-' + hash + ext;
    修改成 filename + ext;

建立gulp執行文件

在根目錄下建立gulpfile.js文件

在gulpfile.js中引入gulp及插件

var gulp = require('gulp'),  //引入gulp 
    rev = require('gulp-rev'), //生成版本號
    revCollector = require('gulp-rev-collector'), //替換版本號
    clean = require('gulp-clean')； //清空文件夾

編輯gulp執行任務

//css文件生成版本號，並將全部的帶版本號的文件名統一放入json文件中。
gulp.task('revCSS',function(){  //gulp.task--定義一個gulp任務；revCSS--定義該任務的名稱，起任何名稱均可以
    return gulp.src('css/*.css')   //gulp.src--指定要操做文件的路徑，個人是css文件夾下的全部後綴名爲css的文件
    .pipe(rev())      //定義一個流，將全部匹配到的文件名所有生成相應的版本號
    .pipe(rev.manifest()) //把全部生成的帶版本號的文件名保存到json文件中
    .pipe(gulp.dest('dist/rev/css')  //把json文件保存到指定的路徑，本身記住就好
})


//js文件生成版本號，並將全部的帶版本號的文件名統一放入json文件中。
gulp.task('revJs',function(){
    return gulp.src('js/*.js')
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'));
})


以上步驟完成後，你就能夠打開'dist/rev'中的json文件，看看全部須要的版本信息，已經生成而且一一對應好了。接下來就是替換的步驟了。
gulp.task('revProduct',function(){   
    return gulp.src(['dist/rev/**/*.json','dist/products/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist/products')); //html更換css,js文件版本，更改完成以後保存的地址
})
這裏須要進行一些解釋。
gulp.src的括號內，有個數組，有兩個參數，
第一個是生成的json文件的路徑，我這裏將全部的json文件，js和css,都選中
第二個是要替換css,js文件(路徑)的HTML文件
那麼這裏咱們完成的就是講全部HTML文件中的js,css文件引入路徑所有替換成帶版本號的路徑。

至此咱們的任務已經基本完成了。

在瀏覽器打開項目，是否是咱們全部的靜態文件路徑都已經帶上的版本號呢？

如今來解釋上邊的修改插件配置的緣由及做用

咱們如今常見的網站的版本管理的版本號  都是這樣的'js/index.js?v=1a1fa1s55d'
而咱們目前實現的版本號，也是這樣的。
若是咱們不修改配置文件的話，會是什麼樣的效果呢 'js/index-a5df1f5g9g.js'，顯然這樣是不行的啦。

使用gulp進行版本管理到這裏就結束啦，本身也是初次嘗試，歡迎大神大神來噴，有漏洞或者不完善的地方，你們多提意見。