原理

如果不是第一次訪問這個網頁,瀏覽器會留下js或css的快取,這對開發人員釋出新版本系統的時候會起到不利影響, 總會叫使用者去清理快取.解決方案是在js或css檔案後面加版本號,如:

<script src="src/components/$module.js?v=1.0.0"></script>

當瀏覽器快取中的檔案問號後面的值和釋出新系統的值不一樣的話, 瀏覽器會認為他是該檔案的某個版本,就會重新載入這個檔案,從而解決問題,但是每次手動改那麼多字尾有些費事, 所以查了些資料, 這裡用gulp來管理

一、gulp外掛安裝

首先安裝 gulp-rev-append
npm install –save-dev gulp-rev-append
這裡注意, 要安裝在你所用的node_modules中, 我在這步跳到坑裡了,直接在webstorm中裝, 結果裝在了專案下面, 因為剛接觸gulp 不會操作,導致整個專案起不來了, 又重新從svn上下了一遍(ps: svn是個好東西)
最後想了下,用cmd執行,指到node_modules所在的這個資料夾的目錄下來執行那段程式碼,就裝上了

二、gulp配置

找到gulpfile.js配置檔案

這裡是最開始的配置
其中新加的是

rev  = require('gulp-rev-append'), // 給URL自動加上版本號

對應下面配置

//路徑替換任務
gulp.task('rev',function(){
    gulp.src('./index.html')
        .pipe(rev())
        .pipe(gulp.dest('./dist'));
});
// Clean
gulp.task('clean', function () {
    del(['dist/index.html'
 
]);
});
gulp.task('default',['clean','rev']);

其中,替換的時候, 就是把目錄下面的index.html檔案,替換完放到目錄下的dist
clean是清除dist資料夾中的index.html
最後一句話是把前兩個合併起來, 執行它相當於執行前兩個
接下來看一下目錄結構

寫完gulp需要重新整理一下,之後配置下index.html 檔案 ,在js後面加上[email protected]@hash

之後執行default,當然這個也可以改名的 當時懶了沒改,笑哭. 最後會在dist資料夾生成一個index.html, 釋出的時候替換一下就可以了,效果如下