gulp管理靜態資源快取

前端專案在版本迭代的時候，難免會遇到靜態快取的問題，明明開發的是ok的,但是一部署到伺服器上，發現頁面變得亂七八糟，這是由於靜態快取引起的。

從上面這張可以看出，瀏覽器載入css,js等資源時，size一欄是from cache,也就是直接使用了本地的資源，而沒有向伺服器請求。這樣做的好處是提公升頁面渲染速度，壞處是當伺服器的對應的檔案發生變化時，瀏覽器卻還是使用快取，造成布局混亂的問題。

乙個比較原始的辦法是在修改了檔案之後，手動改變檔名稱，然後再在html手動更新資源的path名稱。打個比方，你有一天更新了a.css的樣式，然後加個日期字尾，把它重新命名為a-1221.css，同時在應用這個css的html中改成:

這時，但瀏覽器發現需要載入這個樣式時，發現自己只有a.css,沒有a-1221.css，就會向伺服器發起請求了。不過，很明顯，這種活大家是都不願意幹的，尤其是css檔案一多的時候，絕對懵逼，所幸我們可以讓gulp來幫我們完成這些乏味的工作。

這是兩個gulp的外掛程式，gulp-rev可以根據靜態資源的得出檔案的hash值，當檔案內容發生改變時，這個hash值也會發生變化。並生成乙個json檔案,大概長這個樣子:

檔案的字尾變成了這個檔案的hash值。gulpfile.js中的**如下:

var rev = require('gulp-rev');
var gulp = require('gulp');
gulp.task('revcss', function());

這個外掛程式只解決了問題的一部分，也就是，把檔案變動和hash值關聯了起來，另一部分改變html的請求路徑還要靠第二個外掛程式gulp-rev-collector來完成。這個外掛程式完成的事情也很簡單，就是把html中的資源路徑，通過正則匹配，替換成更新後的路徑。**如下:

var gulp = require('gulp');
var revcollector = require('gulp-rev-collector');
gulp.task('revhtml', function () );

所以這兩個外掛程式就解決問題了嗎？可惜並不是這樣。因為你的css檔名並沒有更改，還是原來的a.css,所以還需要乙個外掛程式幫我們解決重新命名的問題。比如用來重新命名檔案的gulp-rename。

var rename = require("gulp-rename");
var json = require('./rev-manifest.json');//rev生成的檔案
gulp.task('rename',function()))
.pipe(gulp.dest("./dist"));
})

查詢引數這種方法適用於前後端不分離的專案，因為這時再去重新命名靜態檔案就會顯得很麻煩。所以出現了這種做法，就是在靜態資源發生變化時，檔名不改變，但是html中請求路徑的查詢引數會發生變化,像下面這樣:

這個查詢引數v對於後台來說，沒有什麼意義，你完全可以改成a,b,c。但是當查詢引數的hash值發生變化時，卻會讓瀏覽器去向伺服器發起請求，從而更新快取。如果你想用這種方式，可以使用gulp-rev-query（github）外掛程式和gulp-rev-collector-query，將檔名轉換成查詢字串。(外掛程式的乙個bug是對於.min.css會解析錯誤)

下面是我參考作者的寫的乙個，解決了min.js的問題，其實就是改了正則:

var through = require('through2');
module.exports = function(ver) )(\..+)"/g, function(match, p1,p2,p3,offset,string)$?$=$"`
});file._contents = new buffer(content);
file.ver = ver;
return file;
}return through.obj(function(file, encoding, callback) );
};

最後，祝大家聖誕快樂！

gulp管理靜態資源快取

Nginx配置快取靜態資源

靜態資源快取和更新

Nginx 靜態資源快取設定

gulp管理靜態資源快取

Nginx配置快取靜態資源

靜態資源快取和更新

Nginx 靜態資源快取設定

相關推薦