使用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進行版本管理到這里就結束啦,自己也是初次嘗試,歡迎大神大神來噴,有漏洞或者不完善的地方,大家多提意見。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM