做了好多項目，這次終於要解決微信瀏覽器緩存這個令人頭疼的問題了。每次上傳新的文件，在微信瀏覽器中訪問時，總要先清除微信的緩存，實在麻煩，在網上搜羅了很多解決辦法，終於找到了方法：利用gulp解決緩存問題。關於gulp大家可以去gulp官網去詳細了解。
這篇文章主要參考於Gulp解決發布線上文件(CSS和JS)緩存問題和Gulp.js----比Grunt更易用的前端構建工具兩篇文章，在這里先謝過原作者。
本文主要記錄安裝gulp以及使用、解決緩存問題的過程，以便日后方便查閱。
1、安裝NodeJS
使用gulp需要先搭建nodejs環境。在NodeJS官網下載NodeJS最新版本，安裝路徑隨意，安裝完之后使用命令符輸入node -v查看NodeJS版本號，如果出現版本號，說明NodeJS安裝成功。隨NodeJS一起安裝下來的還有npm包管理工具，能解決NodeJS代碼部署上的很多問題。命令符輸入npm -v查看npm版本號。如下圖：
2、全局安裝gulp
命令符輸入 npm install -g gulp ，之后gulp -v查看gulp版本號，如果出現版本號則安裝成功。如下圖：
3、初始化package.json 文件
命令符定位到項目根目錄下，命令符輸入 npm init，依照提示將項目名稱、項目版本號、項目說明（必填項）填寫。如下圖：
4、安裝項目開發依賴
命令符定位到在項目根目錄下，命令符輸入 npm install --save-dev gulp，之后項目根目錄下會生成node_modules模塊插件。
5、在項目根目錄下新建 gulpfile.js 文件
所有配置代碼如下：
1 var gulp = require('gulp'), 2 concat = require('gulp-concat'),//- 多個文件合並為一個；
3 minifyCss = require('gulp-minify-css'),//- 壓縮CSS為一行；
4 jshint = require('gulp-jshint'), 5 uglify = require('gulp-uglify'), 6 rev = require('gulp-rev'),//- 對文件名加MD5后綴
7 revCollector = require('gulp-rev-collector'),//- 路徑替換
8 clean = require('gulp-clean');//- 清空文件夾，避免資源冗余
9
10 //清空文件夾，避免資源冗余css
11 gulp.task('cleancss',function(){ 12 return gulp.src('css',{read:false}).pipe(clean()); 13 }); 14
15 //清空文件夾，避免資源冗余js
16 gulp.task('cleanjs',function(){ 17 return gulp.src('js',{read:false}).pipe(clean()); 18 }); 19
20 gulp.task('css', ['cleancss'], function() {//- 創建一個名為 concat 的 task
21 gulp.src(['./src/css/*.css']) //- 需要處理的css文件，放到一個字符串數組里
22 //.pipe(concat('wrap.min.css')) //- 合並后的文件名
23 .pipe(minifyCss())//- 壓縮處理成一行
24 .pipe(rev())//- 文件名加MD5后綴
25 .pipe(gulp.dest('./css'))//- 輸出文件本地
26 .pipe(rev.manifest())//- 生成一個rev-manifest.json
27 .pipe(gulp.dest('./rev/css'));//- 將 rev-manifest.json 保存到 rev 目錄內
28 }); 29
30 gulp.task('js', ['cleanjs'], function() {//- 創建一個名為 concat 的 task
31 gulp.src(['./src/js/*.js']) //- 需要處理的js文件，放到一個字符串數組里
32 //.pipe(concat('wrap.min.js')) //- 合並后的文件名
33 .pipe(jshint())//- 壓縮處理成一行
34 .pipe(uglify()) 35 .pipe(rev())//- 文件名加MD5后綴
36 .pipe(gulp.dest('./js'))//- 輸出文件本地
37 .pipe(rev.manifest())//- 生成一個rev-manifest.json
38 .pipe(gulp.dest('./rev/js'));//- 將 rev-manifest.json 保存到 rev 目錄內
39 }); 40
41 gulp.task('rev', function() { 42 gulp.src(['./rev/**/*.json', './src/*.html'])//- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件。通過hash來精確定位到html模板中需要更改的部分，然后將修改成功的文件生成到指定目錄
43 .pipe(revCollector())//- 執行文件內css名的替換
44 .pipe(gulp.dest('./'));//- 替換后的文件輸出的目錄
45 }); 46
47
48 gulp.task('default', ['css','js','rev']);
6、安裝插件
為了確保插件安裝成功，要依次執行下列命令符：
npm install --save-dev gulp-concat
npm install --save-dev gulp-minify-css
npm install --save-dev gulp-jshint
npm install --save-dev gulp-uglify
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-clean
7、運行gulp
此時我的目錄結構如下：
命令符執行兩遍gulp任務（執行一遍沒有生效，得執行兩遍，目前還沒找到原因），如下圖：
可以看一下執行gulp任務時，依次執行的插件任務，現在再來看一下我的目錄結構：
其中src內是項目的源文件，在項目根目錄下生成的css、js和html文件是執行gulp任務事生成，可以看到里面的文件名已經生成了md5后綴，下面是根目錄下html文件的代碼：
css和js引用已經自動改為了帶MD5后綴的文件名。
通過gulp自動化生成帶有MD5后綴名的文件，瀏覽器在每次請求時就會獲取新的文件，也就避免了瀏覽器緩存的出現。
關於gulp還有很多新的玩兒法，大家可以自行去百度。
如果對這篇文章有什么建議或意見，歡迎留言~~