最近在开发web项目的时候发现一个令人头疼的事情，在微信公众号上展示的页面微信为了提升性能会进行缓存，关键是这个缓存机制还和其他浏览器的不一样，这就导致了即使发布了新的版本，如果不清除缓存的情况下，还是会执行缓存的老版本。对于用户来讲，可能不懂得怎么清除缓存，这就会出现bug。
通过网上查找资料，各路大神对于清除缓存给了好多方法，在此展示下，当然最终还是要说下使用gulp来解决微信html页面中css、js缓存的问题，后台配置Nginx环境解决html文件本身被缓存的问题。
清除页面缓存（对微信无效）
方法一： 添加meta
- no-cache: 告诉浏览器、缓存服务器，不管本地副本是否过期，使用资源副本前，一定要到源服务器进行副本有效性校验
- must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<!--禁止浏览器从本地计算机的缓存中访问页面内容。-->
<!--注意：这样设定，访问者将无法脱机浏览。-->
＜meta http-equiv="Pragma" content="no-cache"＞
<!--设定网页的到期时间，用于设定网页的到期时间。-->
<!--一旦网页过期（content = "0"），必须到服务器上重新传输。-->
＜meta http-equiv="expires" content="0"＞
方法二： 用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control （针对此接口不缓存）
$.ajax({
url:'www.baidu.com',
dataType:'json',
data:{},
async:false,
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操作
}
});
方法三：ajax请求添加cache:false (不对接口数据缓存)
$.ajax({
url:'www.baidu.com',
dataType:'json',
data:{},
cache:false,
async:false,
ifModified :true ,
success:function(response){
//操作
}
});
方法四：在服务端配置 （不对html文件本身缓存）
location ~ \.(html)$ {
expires -1;
add_header Cache-Control no-store;
}
此处只让后台同事对html不进行缓存，css、js加载完一遍之后，进行缓存（304），这样既能保证性能，也能解决每次更新带来的缓存问题。
（上面的方法和Gulp共同使用，就能解决微信缓存问题了。）
--------------------------------- gulp ------------------------------
对于gulp的应用我也只是皮毛，在此记录下只是为了以后用到了方便查阅。大家可以通过Gulp中文网(戳进去)和这篇博文（通过gulp将less转为css）进行相应的学习~
“gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定等等操作。。。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。”
第一步：搭建nodejs环境
在使用gulp前需要搭建nodejs的环境，不熟悉的可以查看我的这篇文章中的第一步和第二步操作。
第二步：全局安装gulp
# 说明：全局安装gulp目的是为了通过它执行gulp任务
$ npm install gulp -g
# 查看是否安装成功，出现版本号即为成功
$ gulp -v
第三步：在项目中新建gulpfile.js文件（这个名字可以改，只要和package.json文件中的"main": " "对应即可）
第四步： 新建package.json文件
说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。
$ cd 到项目路径
$ npm init
按照提示一步一步的填写对应的信息即可，此时项目中就会生成一个package.json文件(配置文件)和node_modules文件夹（依赖模板库）。
第五步： 本地安装gulp插件
在项目路径下执行：
# --save-dev:保存配置信息到package.json文件的devDependencies开发环境依赖中。
$ npm install --save-dev
# 因为本例中用到的模板比较多，需要都安装下
$ npm install gulp-rev --save-dev
$ npm install gulp-rev-collector --save-dev
$ npm install gulp-clean --save-dev
$ npm install gulp-jshint --save-dev
$ npm install jshint --save-dev
$ npm install gulp-minify-css --save-dev
$ npm install gulp-uglify --save-dev
第六步： 在gulpfile.js文件中实现脚本逻辑
接下来就要回过头来去编辑我们刚才创建的gulpfile.js文件了。
因为代码较多，我就切成图片放这里了，随后我回把整个demo放在GitHub上，有需要查看的可以download下来。
第七步：运行gulp
方式一：
1. 通过webStrom 选中 gulpfile.js 文件，右击选择 Show Gulp Tasks。
方式二：
通过Terminal终端：
cd 到项目路径下
# 执行所有任务
$ gulp
# 执行指定任务
$ gulp 任务名称
上面的两种方法取一执行即可。
执行结果如下：提示：(不管执行哪种方式，都要重复执行2遍，要不然html文件中引入的css、js文件名不会被替换掉，我目前也不知道为什么。。。)
dist文件夹下的css和js
web文件下是未压缩的原开发文件，通过执行gulpfile.js脚本，在dist文件下生成了对应的压缩过的css和js文件。
rev文件夹下记录了原文件和处理后生成的新文件的一一对应关系。
rev-manifest.json中保存的内容如下：
# /rev/css
{
"myCss.css": "myCss-1bfa302df1.css"
}
# /rev/js
{
"myJavaScript.js": "myJavaScript-228385c373.js"
}
对于生成的html文件：
这是我web文件夹下原html文件的引用
<link rel="stylesheet" href="css/myCss.css">
<script src="js/myJavaScript.js"></script>
这是在dist目录下新生成的html文件的引用
<link rel="stylesheet" href="css/myCss-1bfa302df1.css">
<script src="js/myJavaScript-228385c373.js"></script>
效果很明显，这样在发布的时候引用dist目录下的对应代码就可以了。
既解决了微信页面缓存的问题（通过修改文件名避免缓存上个版本），又提升了页面访问效率。
到此，整个demo就梳理完了。我把demo放在gitHub上了，有需要查看的可以download下。
千里执行，始于足下~
