Gulp前端框架,整合ssm项目做到清除前端页面缓存，给静态资源名添加版本号！

上周五,在和客户交流时总是出现,我们提交了代码,或者更新一版新的代码之后,我们在微信内置浏览器中,没有清理缓存请的情况下,页面的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的安装

1. 下载安装全局npm命令，如果想了解npm命令可以去node.js官网了解一下https://nodejs.org/en/。
   如果使用不了npm可以使用淘宝镜像，自行百度。命令差不多只不过使用cnpm命令。
   利用npm -v可以查看版本，如果在任何文件夹下都可以访问到，那么安装成功。

   npm install package-name -g  ||   npm install package-name  -global
   

2. 下载安装全局gulp
   使用gulp -v可以查看gulp版本，与上述命令效果一致。
   想详细 了解gulp使用可以移步。
   https://www.gulpjs.com.cn/

   npm install gulp -g
   

3. 找到你项目的根目录，并初始化。
   进入到你项目的根目录
   
   执行，使项目初始化，只需要输入项目名，版本号，其他的一律确定就好

npm init

4. 安装本地gulp
   将node_modules插件包安装在你项目文件夹下

npm install gulp --save-dev 

5. 下载对应插件包
   我用到了这些，如果不够，或者缺少了插件包，他会有提示把命令中间的插件包名字换了，下载就可以。

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 

至此插件安装完毕，开始配置文件

1. 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