現在推薦使用 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也要做相應的修改。當然，這里還有個附加的需要就是，靜態資源需要自行優化（壓縮合並）。
- 靜態資源優化
- 靜態資源重命名
- 修改靜態資源的引用路徑
若是我們手動修改，這會有多麻煩呢？大家可以想一想，我們先用工具壓縮了資源，然后手動更改名字，再打開相應的頁面，改路徑。這樣一直枯燥的重復，不僅容易出錯，而且尼瑪工作量很大好嘛？！程序員自有懶人在，我們就站在懶巨人的肩膀上，沐浴春風。
那在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的可以先自行尋找教程，最后再回來實現一遍。