使用gulp解决微信页面缓存的问题
最近在开发web项目的时候发现一个令人头疼的事情，在微信公众号上展示的页面微信为了提升性能会进行缓存，关键是这个缓存机制还和其他浏览器的不一样，这就导致了即使发布了新的版本，如果不清除缓存的情况下，还是会执行缓存的老版本。对于用户来讲，可能不懂得怎么清除缓存，这就会出现bug。
通过网上查找资料，各路大神对于清除缓存给了好多方法，在此展示下，当然最终还是要说下使用gulp来解决微信html页面中css、js缓存的问题，后台配置Nginx环境解决html文件本身被缓存的问题。
清除页面缓存（对微信无效）
方法一： 添加meta
no-cache: 告诉浏览器、缓存服务器，不管本地副本是否过期，使用资源副本前，一定要到源服务器进行副本有效性校验
must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。
＜meta http-equiv="Pragma" content="no-cache"＞＜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": " "对应即可）
gulpfile.js是gulp项目的配置文件，在这个文件中写入需要执行的脚本
第四步： 新建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
执行完之后在package.json文件的devDependencies中就会产生对应的依赖。node_modules文件夹中就会下载对应的模板。
第六步： 在gulpfile.js文件中实现脚本逻辑
接下来就要回过头来去编辑我们刚才创建的gulpfile.js文件了。
因为代码较多，我就切成图片放这里了，随后我回把整个demo放在GitHub上，有需要查看的可以download下来。
图中就是对应的整个脚本逻辑
第七步：运行gulp
方式一：
1. 通过webStrom 选中 gulpfile.js 文件，右击选择 Show Gulp Tasks。
2. 在左侧列表中就会列出我们脚本中写的所有task，双击想要执行的task即可。此处我们通过双击default，来执行我们编写的所有task。
方式二：
通过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文件的引用
这是在dist目录下新生成的html文件的引用
效果很明显，这样在发布的时候引用dist目录下的对应代码就可以了。
既解决了微信页面缓存的问题（通过修改文件名避免缓存上个版本），又提升了页面访问效率。
到此，整个demo就梳理完了。我把demo放在gitHub上了，有需要查看的可以download下。
网友评论