版本管理的原因
我們的項目在瀏覽器運行時,瀏覽器會默認自動緩存靜態資源,比如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進行版本管理到這里就結束啦,自己也是初次嘗試,歡迎大神大神來噴,有漏洞或者不完善的地方,大家多提意見。