gulp之靜態資源防緩存處理

如今推薦使用 Webpack 處理這一類靜態資源的事情。它是基於配置化的，自身就已經集成了打 hash 的功能，還能夠配合 HtmlWebpackPlugin 這個插件，生成資源時會把它的路徑自動導入到 html 內。固然更重要的仍是 webpack 集成了 js 模塊機制，各種資源地址可自動處理，可添加 babel，sass 等編譯工具插件，提供壓縮打包功能。至於如今這個過了幾年了還能不能用，確實不清楚，由於工具升級可能會致使不兼容的狀況。

2017/07/13

--------------------------------------------------如下爲原文-----------------------------------------------------------

 

　　最近，由於校友網項目開始有些規模了。開始就要考慮對靜態資源進行工程自動化的管理。一講到前端的自動化工具，你們或許都會想到Grunt，Gulp，或者百度的FIS。這三個都有各自的特色，你們能夠依據本身的喜愛，選擇工具。至於爲何選擇Gulp，由於Grunt的gruntfile配置真的很頭大好嗎！簡直看到頭暈暈，可是仍是有很多人喜歡這種方式的。而後FIS真心很強大，你所須要的，基本它都提供了，而且作得很好很簡單，若是你急於立刻使用能夠趕忙去看看。而我爲何不用呢，感受多是由於，有點黑盒子？哈哈哈....不說了，讓咱們趕忙看看今天的主角——Gulp。

　　定義：gulp.js 是一種基於流的，代碼優於配置的新一代構建工具。

　　關於還要安裝Node，怎麼樣用npm加載須要的Node模塊，就再也不贅述啦。固然使用yeoman來搭建手腳架是最快的，有興趣的能夠看看，慕課網裏有噢。接下來看看咱們的案例。咱們的需求是，爲了防止客戶端的靜態資源緩存，咱們須要每次更新css或js的時候，經過md5或時間戳等方式從新命名靜態資源。讓客戶端能夠從新請求資源，而不是從緩存裏取。而後html模板裏的src也要作相應的修改。固然，這裏還有個附加的須要就是，靜態資源須要自行優化（壓縮合並）。

1. 靜態資源優化
2. 靜態資源重命名
3. 修改靜態資源的引用路徑

　　如果咱們手動修改，這會有多麻煩呢？你們能夠想想，咱們先用工具壓縮了資源，而後手動更更名字，再打開相應的頁面，改路徑。這樣一直枯燥的重複，不只容易出錯，並且尼瑪工做量很大好嘛？！程序員自有懶人在，咱們就站在懶巨人的肩膀上，沐浴春風。

　　那在gulpfile中，咱們要用到的插件有哪些呢？

　　

　　require完以後，咱們就能夠開始編寫一個簡單實用的版本控制的自動化工具了。

　　咱們一步一步來，咱們須要產出一個靜態資源路徑，咱們首先要清空裏面曾經的資源，防止有冗餘。那咱們就定義了一個clean任務，而後將src須要清理的文件夾引入，而後執行clean。src的第二個參數的{read:false}，是不讀取文件加快程序。

　　　　

　　清理完以後，就能夠對靜態資源進行優化處理。那咱們定義兩個任務，一個是css的，一個是js的。在css裏，還能夠編譯less或sass，這裏我就沒有作。而後js裏一樣能夠編譯coffee。咱們來仔細看看下面的程序，首先任務名是css，而後src引入css文件，執行csso的壓縮優化，而後重命名爲*.min.css。接下來就是到了添加版本號，並將通過優化和版本控制的css輸出到dist文件夾裏。最後再用rev.manifest，將對應的版本號用json表示出來，這裏能夠參照下面第二張圖。這樣經過hash來精肯定位到html模板中須要更改的部分。

　　

　　

　　接着即是最後一步，改變引用路徑，這裏咱們將這個任務命名爲rev。記得rev任務要在生成mainfest以後進行，能夠用gulp[]任務依賴來進行流程控制。

　　

　　src引入一個數組，前一個是引入剛纔生成的json文件，後一個是須要更改的html模板，固然我這裏是jsp。而後replaceReved: true就能夠成功替換了。最後將替換過的文件輸出便可，這裏我輸出到了原來引入的路徑，這樣就能夠成功替換了。若是你在開發的時候須要不斷調試，還能夠加上gulp.watch，實時監控文件變化，而後動態作出響應。固然仍是推薦開發與上線分開不一樣的文件夾進行管理。（但是我這坑爹的組長沒有！媽蛋！）最後來看一下按照這樣執行的大概結果。

　　

　　這是成功生成到dist的靜態資源，都加上了相應的後綴。這裏要着重強調，修改的僅僅是後綴名，而以前的路徑是不會幫你修改的。也就是說，你的原來的Html引入靜態資源的時候，路徑就要預先寫好，而後rev來幫你修改後綴。至因而不是有更好的方法，我暫時還不清楚～～

　　這是html模板上的引用路徑作了對應的變化。

 

　　是否是講的十分不清楚呢？！哈哈哈，我跳過了一些的步驟 ，我只是想推薦你們gulp-rev配合gulp-rev-collector，這個自動化靜態資源版本控制工具用gulp是能夠作到的！因此要是你們不大會使用gulp的能夠先自行尋找教程，最後再回來實現一遍。