上周五,在和客户交流时总是出现,我们提交了代码,或者更新一版新的代码之后,我们在微信内置浏览器中,没有清理缓存请的情况下,页面的scc、js、字体文件、图片、都会出现无法更新到最新版本的情况。
领导交给了这个任务,让自动解决前段缓存问题,那么查阅相关资料之后,决定使用node.js中gulp插件包来做。那么废话不多说现在开始。
那么我们确定我们的静态文件有那些。我的项目中静态资源文件有这些:
css文件、js文件、fonts文件、image文件、html文件。
根据这些文件来解决缓存问题。
一、 解决HTML的缓存问题。
在HTML中有这样的一个代码可以解决HTML的缓存问题。在每个HTML头部加入这行代码,这样就不需要关注.html文件的缓存信息,在服务器中有新的.html发布时,浏览器会更新到最新的.html文件。
<meta http-equiv="Cache-Control" content="no-cache">
二、使用Gulp前端框架解决css、js、图片、字体的缓存问题。——加版本号。
1.gulp的安装
-
下载安装全局npm命令,如果想了解npm命令可以去node.js官网了解一下https://nodejs.org/en/。
如果使用不了npm可以使用淘宝镜像,自行百度。命令差不多只不过使用cnpm命令。
利用npm -v可以查看版本,如果在任何文件夹下都可以访问到,那么安装成功。npm install package-name -g || npm install package-name -global
-
下载安装全局gulp
使用gulp -v可以查看gulp版本,与上述命令效果一致。
想详细 了解gulp使用可以移步。
https://www.gulpjs.com.cn/npm install gulp -g
-
找到你项目的根目录,并初始化。
进入到你项目的根目录
执行,使项目初始化,只需要输入项目名,版本号,其他的一律确定就好
npm init
- 安装本地gulp
将node_modules插件包安装在你项目文件夹下
npm install gulp --save-dev
- 下载对应插件包
我用到了这些,如果不够,或者缺少了插件包,他会有提示把命令中间的插件包名字换了,下载就可以。
npm install run-sequence --save-dev
npm install gulp-rev --save-dev
npm install gulp-rename --save-dev
npm install gulp-rev-collector --save-dev
npm install gulp-minify-html --save-dev
npm install gulp-clean --save-dev
至此插件安装完毕,开始配置文件
- Gulpfile.js配置
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
rename = require('gulp-rename'),
revCollector = require('gulp-rev-collector');
var minifyHTML = require('gulp-minify-html');
var clean = require('gulp-clean');
var contextPath = './src/main/webapp'; //开发上下文路径
var dest = contextPath + '/dist'; //生成文件目录存放的路径
var srcRev = contextPath + '/rev-project'; //版本号替换后生成新文件的目录
var revM = contextPath + '/rev'; //映射json文件存放的位置
var config = {
fonts: {
src: contextPath + "/fonts/*",
dest