j2ee maven 结合gulp构建工具构建 war 自动刷新浏览器缓存

 前几年大多数时间，都是在做PC版的j2ee项目。

但随着移动互联的崛起，随即也转战到了微信公众号，移动端的开发。

 

网页缓存，以前一直知道，却没有去尝试解决的问题。觉得在PC端用户刷刷页面就能解决的事情，我们就没必要去瞎折腾（此处已安装防喷防火墙）。然后现在到了移动互联，比如移动端的各个浏览器，没有了强制刷新功能，也不可能要求用户卸载微信，清理数据。让用户做了这些，不知道早已损失了多少用户。所以才有了现在这篇文章。在网上搜集这零散的资料，然后来解决这个问题。对于不正确或有更好的做法，请各位大神指正！非常感谢！

 

解决了那些问题？举例说明吧。比如项目中有一个文件 /js/jquery.js .当我们修改了以后，客户端再次访问不会刷新jquery.js的已修改的内容，而使用的旧版的代码。解决方案原理：构建时，生成一个md5码，并追加在jquery.js上，构建后的jquery.js名称变更为jquery-E87J39.js 类似这样。每次修改后，MD5码都不一样。同时，插件还会替换jsp里面的 /js/jquery.js 路径为 /js/jquery-E87J39.js.保证用户下次请求到的文件是新的。CSS文件、图片等静态资源文件处理原理一致。

 

标题也提到了。j2ee,maven结构。因为目前很多项目都是这样，java代码与前端代码混合开发，java程序猿要懂得html并编写jsp.这也是一种流行编码方式。其他更多的不再赘述。

 

 

1.构建用到的maven插件，frontend-maven-plugin，antrun

2. 前端构建工具 gulp

 

更多资料也可以搜索上面的关键词并查看相关资料。

 

下面是我这次构建的相关代码.

 

 

pom.xml增加构建插件

 

<properties>
        <project.build.frontend.version>1.0</project.build.frontend.version>
        <project.build.node.version>v0.12.4</project.build.node.version>
        <project.build.npm.version>1.4.9</project.build.npm.version>
    </properties>

<plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${project.build.frontend.version}</version>
                <executions>
                     <execution>
                        <id>install node and npm</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>${project.build.node.version}</nodeVersion>
                            <npmVersion>${project.build.npm.version}</npmVersion>
                            <installDirectory></installDirectory>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id> 
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
					    <id>gulp build</id>
					    <goals>
					        <goal>gulp</goal> 
					    </goals>
					
					    <phase>prepare-package</phase>
					
					    <configuration>
					    </configuration>
					</execution>
                </executions>
            </plugin>

 

 

项目根目录增加，package.json,gulpfile.js.

 

package.json内容：

 

{
  "name": "example",
  "version": "0.0.1",
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-rev": "7.1.2",
    "gulp-rev-collector": "1.0.5",
    "run-sequence": "1.2.2",
    "gulp-clean": "0.3.2",
    "gulp-clean-css": "2.0.12",
    "gulp-uglify":"2.0.0",
    "pump" : "1.0.1",
    "gulp-htmlclean":"2.7.6"
  },
  "jspm": {
    "dependencies": {
      "jquery": "github:jquery/jquery@^2.1.3"
    },
    "devDependencies": {
      "traceur": "github:jmcriffey/bower-traceur@0.0.88",
      "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88"
    }
  },
  "scripts": {
    "prebuild": "npm install",
    "build": "gulp"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "run-sequence": "^1.2.2"
  }
}

 

 

 

 

gulpfile.js文件内容：

 

 

var gulp = require('gulp'),
	rev = require('gulp-rev'),
	revCollector = require('gulp-rev-collector'),
	runSequence = require('run-sequence'),
	clean = require('gulp-clean'),
	cleanCSS = require('gulp-clean-css'),
	uglify = require('gulp-uglify'),
	pump = require('pump'),
	htmlclean = require('gulp-htmlclean');;

gulp.task('clean',function(){
	return gulp.src('dist',{read:false}).pipe(clean());
});

gulp.task('clean_tmp',function(){
	return gulp.src('dist_tmp',{read:false}).pipe(clean());
});

gulp.task('minify-css', function() {
	  return gulp.src('src/main/webapp/**/*.css')
	    .pipe(cleanCSS({compatibility: 'ie8'}))
	    .pipe(gulp.dest('dist_tmp/'));
});
gulp.task('css',['minify-css'], function (cb) {
    return gulp.src('dist_tmp/**/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist/'))
        .pipe( rev.manifest() )
        .pipe( gulp.dest( 'dist/rev/css' ) );
});

gulp.task('compress', function (cb) {
	  pump([
	        gulp.src('src/main/webapp/**/*.js'),
	        uglify(),
	        gulp.dest('dist_tmp/')
	    ],
	    cb
	  );
	});
gulp.task('scripts',['compress'], function () {
    return gulp.src(['dist_tmp/**/jquery.js'])
        .pipe(rev())
        .pipe(gulp.dest('dist/'))
        .pipe( rev.manifest() )
        .pipe( gulp.dest( 'dist/rev/js' ) );
});

gulp.task('rev',function(){
	return gulp.src(['dist/rev/**/*.json','src/main/webapp/WEB-INF/views/**/*.jsp'])
		.pipe(revCollector({
			replaceReved: true
		}))
		.pipe(gulp.dest('dist/WEB-INF/views/'));
});
gulp.task('minify', function() {
	  return gulp.src('dist/WEB-INF/views/**/*.jsp')
	    .pipe(htmlclean())
	    .pipe(gulp.dest('dist/WEB-INF/views/'));
	});

gulp.task('default',function(){
	runSequence('clean','clean_tmp','css','scripts','rev','minify');
});

 

 

 

增加了这些文件，install的时候，就会进行前端构建，但这还不够，目前这里仅仅是把对应的css,js,html构件号了，并没有通过maven-war-plugin 构建到war中。所以还需要增加war包配置

 

 

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-war-plugin</artifactId>
	<version>2.3</version>
	<configuration>
	<warName>xxx</warName>
	<webResources>
	<resource>
	<!-- this is relative to the pom.xml directory -->
	<directory>dist</directory>
	<includes>
	<include>**/*.css</include>
	<include>**/*.js</include>
	<include>**/*.jsp</include>
	<include>**/*.jpg</include>
	<include>**/*.png</include>
	<include>**/*.gif</include>
	<include>**/*.jpeg</include>
	</includes>
	</resource>
	<resource>
	<!-- this is relative to the pom.xml directory -->
	<directory>dist_tmp</directory>
	<includes>
	<include>**/*.js</include>
	</includes>
	</resource>
	</webResources>
	<packagingExcludes></packagingExcludes>
	<!-- 过滤静态资源文件和jsp，这些文件来自已处理过的dist文件夹 -->
	<!-- <warSourceExcludes>**/*.css,**/*.js,**/*.jsp,**/*.jpg,**/*.png,**/*.gif,**/*.jpeg</warSourceExcludes> -->
	<warSourceExcludes>**/*.css,**/*.js,**/*.jsp</warSourceExcludes>
	</configuration>
</plugin>

 

 

 

目前做完这些，一个可用的war包就出来了。

 

 

其他问题：

1. 每次构建都会下载构建资源，所以，我的做法是第一次构建我完成后，我把相关的资源打了个包。然后在构建前，用antrun插件，将其解压出来到项目下面就可以不用下载啦。

<plugin>
		      <artifactId>maven-antrun-plugin</artifactId>
		      <version>1.8</version>
		      <executions>
		         <execution>
		            <phase>validate</phase>
		            <configuration>
		               <tasks>
		                  <echo message="unzipping file" />
		                  <unzip src="D:/gulp/gulp.zip" dest="./" />
		               </tasks>
		            </configuration>
		            <goals>
		               <goal>run</goal>
		            </goals>
		         </execution>
		      </executions>
		   </plugin>

 gulp.zip 这个文件我就放上来了，因为第一次成功构建以后，在项目下面会有，主要是根目录下node和node_modules这两个目录打包了成gulp.zip

 

 

2.无法替换jsp中已转换过的js文件。在大多数情况下，我们的路径是${ctx}/js/jquery.js或${ctx}/css/style.css这样。但前端构建似乎不是这样。错误原因是匹配路径与我们想要的有一点出入。所以，我们就需要修改下面插件的代码。

需要修改的插件是：gulp-rev-collector里面的Index.js。这个文件我放附件吧。

 

3.js文件没有增加md5串或替换，请看看您的配置是否正确。请检查下gulpfile.js中"scripts"是否包含你的js。因为我们这边是有固定有些才替换，所以才有这个配置，如果你期望是全部的js都参与加密替换，可以考虑配置成dist_tmp/**/*.js

 

 

 

 

评论

1 楼 cymo 2018-03-21  

非常非常好的教程，清晰明了好用，谢谢博主