Gulp解決發布線上文件(CSS和JS)緩存問題
本文的緣由：目前經常線上發布文件后要不斷的刷新頁面及過很長時間，頁面上的CSS和JS文件才能生效，特別對於目前做微信商城的時候，微信內置的瀏覽器緩存非常的嚴重，之前我們經常是在文件后面加上時間戳的方式來解決線上發布后的緩存問題，但是在微信瀏覽器內並不生效；因此我們需要改變文件名的方式來解決緩存的問題，因此使用后綴名加上MD5一連串的字符串來解決緩存的問題；
我們先可以考慮這么一個功能，我在頁面上引用css文件如下：
./css/xx.css
./js/xx.js
我現在想通過使用MD5重新命名css文件，在頁面上自動變為如下文件
./css/xx-34f3902a35.css
一：首先我們需要安裝gulp插件；安裝教程如下：
http://www.cnblogs.com/tugenhua0707/p/4069769.html
下面我們需要來看看我整個目錄結構如下：
如上目錄，在src文件夾是存放所有css文件和JS文件的，gulp.html按道理是根目錄下的，但是在打包之前，我是把他們放在src文件夾下，作為源文件，根目錄下可以先把他刪掉或者放在那邊也沒有關系；也就是說 把所有的html文件備份一份放在src文件夾下作為源文件；
下面是gulp.html的源代碼如下：
二：安裝插件
- 在項目根目錄下 運行npm init 后 執行一些操作會在根目錄下生存一個 package.json文件夾；
- 進入項目的根目錄后，執行命令安裝如下插件：
npm install –save-dev gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector
現在我的package.json 變成如下：
{ "name": "rev", "version": "1.0.0", "description": "\"test package\"", "main": "index.js", "scripts": { "test": "\"a common\"" }, "keywords": [ "rev" ], "author": "tugenhua", "license": "ISC", "devDependencies": { "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-jshint": "^2.0.0", "gulp-less": "^3.0.5", "gulp-minify-css": "^1.2.1", "gulp-rename": "^1.2.2", "gulp-rev": "^6.0.1", "gulp-rev-collector": "^1.0.2", "gulp-uglify": "^1.5.1", "jshint": "^2.8.0" } }
如上；如果不想安裝的話，可以直接在項目的根目錄下新建一個package.json文件；直接把上面的package.json代碼復制進行即可；最關鍵的是 devDependencies 依賴項，其他的可以自己根據自己的需要更改即可~ 然后進入項目的根目錄下 執行命令 npm install 即可在根目錄下生存 node_modules模塊插件；
三：在項目的根目錄下新建 Gulpfile.js文件配置
所有配置代碼如下：
var gulp = require('gulp'); var concat = require('gulp-concat'); //- 多個文件合並為一個； var minifyCss = require('gulp-minify-css'); //- 壓縮CSS為一行； var rev = require('gulp-rev'); //- 對文件名加MD5后綴 var revCollector = require('gulp-rev-collector'); //- 路徑替換 gulp.task('concat', function() { //- 創建一個名為 concat 的 task gulp.src(['./src/css/*.css']) //- 需要處理的css文件，放到一個字符串數組里 //.pipe(concat('wrap.min.css')) //- 合並后的文件名 .pipe(minifyCss()) //- 壓縮處理成一行 .pipe(rev()) //- 文件名加MD5后綴 .pipe(gulp.dest('./dist/css')) //- 輸出文件本地 .pipe(rev.manifest()) //- 生成一個rev-manifest.json .pipe(gulp.dest('./rev')); //- 將 rev-manifest.json 保存到 rev 目錄內 }); gulp.task('rev', function() { gulp.src(['./rev/*.json', './src/*.html']) //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
.pipe(revCollector()) //- 執行文件內css名的替換
.pipe(gulp.dest('./')); //- 替換后的文件輸出的目錄 }); gulp.task('default', ['concat', 'rev']);
如上配置，配置完成后，進入根目錄執行命令如下：
先執行 gulp concat 這個任務 生成一個rev-mainfest.json文件；
然后再運行rev這個任務，把html文件中的css文件替換掉，執行完后，項目的目錄結構變成如下：
對比之前的結構 已經在根目錄下生成rev這個文件，該文件下 有一個rev-manifest.json文件，我們可以看看該文件的代碼如下：
{ "gulp.css": "gulp-34f3902a35.css" }
把gulp.css 文件名 需要改成該生存后有MD5的后綴名的文件；
然后再調用rev這個任務，先讀取src下面的所有html的源文件，需要把gulp.css替換成我們生成后的文件，我們現在再來看看生成的根目錄下的gulp.html源碼變為如下：
可以看到已經替換成帶有MD5后綴名的文件了；
注意：為什么一剛開始的時候，我們需要把項目根目錄下的所有html文件需要備份一份到src目錄下呢？ 那是因為每次進行打包的時候，MD5的一連串的字符串會跟着改的，我們需要一個對比的源文件，我們需要把gulp.css 替換成 生成帶有MD5一連串的css文件；不管MD5字符串如何更改，我們只需要把gulp.css后綴加上生成的MD5字符串即可~ 那如果我們不備份的話，使用你們的大腦試想下，每次打包一下，根目錄下源文件會覆蓋一下；並且rev文件夾下 的 rev-manifest.json 代碼會變成如下：
{
"gulp.css": "gulp-57f9aab029.css",
"gulp-57f9aab029.css": "gulp-57f9aab02922222.css",
"gulp-57f9aab02922222.css": "gulp-57f9aab0292222aaaaaaa.css",
........
}
每次打包一下，他都會找到頁面上的源文件(冒號左側代表現在的源文件，冒號右邊的代表需要替換的新文件的名字)；如此循環下來；如果我們備份一下的html文件的話，那么rev-manifest.json永遠就是一個替換文件；如下這樣的：
{
"gulp.css": "gulp-57f9aab029.css"
}
因為它永遠找到的是 源文件上的gulp.css 然后替換成生成新的帶有MD5后綴名的文件名；當然如果你覺得不備份的話，在manifest.json生存多少個建值對的都沒有關系的話，你也可以不備份，看個人需要；如上只是演示css文件了，當然JS文件也是一樣的配置；
github上demo：https://github.com/tugenhua0707/gulp-rev-collector