gulp编译maven生成版本号解决静态资源缓存问题

问题描述

浏览器的缓存机制导致修改后的js或css文件重新部署发布后未生效

现在项目开发结构多为前后端分离，此种结构使用前端构建工具(gulp, webpack)编译发布时生成版本号并添加，方便快捷，容易实现。
对于前后端混合，未使用前端构建工具，开发人员以后端开发为主的项目，不宜使用前端构建工具，本文主要针对此类项目给出解决方案。

解决方法

解决问题的关键点有两个：

1. 如何生成版本号
2. 页面中如何获取到版本号

   如何生成版本号

3. 使用统一的版本号，如发布日期、代码提交id、迭代版本等
4. 计算每个静态资源文件的hash值，将hash值作为版本号

页面中如何获取到版本号

1. 如果使用统一的版本号可将版本号定义成变量。一处修改，全部使用
2. 如果使用文件hash值，需要每次编译页面文件，写入hash值版本号

本文使用方法

1. 本文中使用gulp一次性编译由于jsp文件，将页面中的静态资源链接修改为 ‘? + 参数’，如：

   <script type="text/javascript" src="/js/common.js?v=${sourceVersion}"></script>

2. npm安装包

   npm install --save-dev gulp  
   npm install --save-dev gulp-rev  
   npm install --save-dev gulp-rev-collector  
   npm install --save-dev gulp-asset-rev  
   npm install --save-dev run-sequence

3. gulpfile.js

   const gulp = require('gulp'),
   	runSequence = require('run-sequence'),
   	clean = require('gulp-clean'),
   	rev = require('gulp-rev'),
   	revCollector = require('gulp-rev-collector');
   
   // 待编译文件路径
   const jsUrl = ['js/**/*.js','!js/jquery*/**/*.js','!js/echarts/**/*.js','!js/selectWindow/**/*.js','!js/lightbox2/**/*.js','!js/sumoselect/**/*.js'];
   const cssUrl = ['css/**/*.css', '!css/zTreeStyle.css'];
   
   gulp.task('cleanRev', function() {
   	return gulp.src('dist/rev', {read: false})
   				.pipe(clean());
   });
   
   gulp.task('cleanWebApp', function() {
   	return gulp.src('dist/webapp', {read: false})
   				.pipe(clean());
   });
   
   gulp.task('revCss', function() {
   	return gulp.src(cssUrl)
   				.pipe(rev())
   				.pipe(rev.manifest())
   				.pipe(gulp.dest('dist/rev/css'));
   });
   
   gulp.task('revJs', function() {
   	return gulp.src(jsUrl)
   				.pipe(rev())
   				.pipe(rev.manifest())
   				.pipe(gulp.dest('dist/rev/json'));
   });
   
   gulp.task('rev', function() {
   	return gulp.src(['dist/rev/**/*.json', '**/*.jsp'])
   				.pipe(revCollector({
   					replaceReved: false
   				}))
   				.pipe(gulp.dest('dist/webapp/'));
   });
   
   gulp.task('dev', function(done) {
   	runSequence(['cleanRev'], ['cleanWebApp'], ['revCss'], ['revJs'], ['rev'], done);
   });
   
   gulp.task('default', ['dev']);

4. 修改npm的包中的index.js源文件，因为默认的版本号不是“？+参数”形式

5. maven插件获取git commit id作为版本号

   <plugin>
   	<groupId>org.codehaus.mojo</groupId>
   	<artifactId>buildnumber-maven-plugin</artifactId>
   	<version>1.4</version>
   	<executions>
   		<execution>
   			<phase>validate</phase>
   			<goals>
   				<goal>create</goal>
   			</goals>
   		</execution>
   	</executions>
    </plugin>

6. properies文件获取变量值

   sourceVersion=${buildNumber}