In the past few years, most of the time, I was working on the PC version of the j2ee project.
But with the rise of mobile internet, it also turned to WeChat public account and the development of mobile terminals.
Web page caching, a problem that has been known before, but has not been tried to solve. We don't need to mess around with things that we think can be solved by swiping the page on the PC side (a blowout firewall has been installed here). Then now comes the mobile Internet, such as various browsers on the mobile terminal, without the forced refresh function, it is impossible to require users to uninstall WeChat and clean up data. Let users do this, I don't know how many users have already been lost. Hence this article. Collect this scattered information on the Internet, and then solve this problem. For incorrect or better practices, please correct me! thank you very much!
Solved those problems? Let me give an example. For example, there is a file /js/jquery.js in the project. When we modify it, the client will not refresh the modified content of jquery.js again, but use the old version of the code. Solution principle: When building, generate an md5 code and append it to jquery.js. After construction, the name of jquery.js is changed to jquery-E87J39.js, similar to this. After each modification, the MD5 code is different. At the same time, the plugin will also replace the /js/jquery.js path in the jsp with /js/jquery-E87J39.js. This ensures that the file the user requests next time is new. The processing principle of static resource files such as CSS files and images is the same.
The title also mentions. j2ee, maven structure. Because many projects are like this at present, java code is mixed with front-end code, and java programmers need to understand html and write jsp. This is also a popular coding method. Other more will not be repeated.
1. The maven plugin used in the build, frontend-maven-plugin, antrun
2. Front-end build tool gulp
For more information, you can also search for the above keywords and view related information.
Below is the relevant code for my build this time.
Add build plugin to 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>
The project root directory is added, package.json, gulpfile.js.
package.json content:
{
"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/[email protected]",
"traceur-runtime": "github:jmcriffey/[email protected]"
}
},
"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 file content:
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');
});
These files are added. When installing, the front-end construction will be performed, but this is not enough. At present, the corresponding css, js, and html component numbers are only included, and are not built into war through maven-war-plugin. So you need to increase the war package configuration
<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>
<!-- Filter static resource files and jsp from the processed dist folder -->
<!-- <warSourceExcludes>**/*.css,**/*.js,**/*.jsp,**/*.jpg,**/*.png,**/*.gif,**/*.jpeg</warSourceExcludes> -->
<warSourceExcludes>**/*.css,**/*.js,**/*.jsp</warSourceExcludes>
</configuration>
</plugin>
After doing this, a usable war package will come out.
other problems:
1. The build resources will be downloaded for each build, so my approach is to package the relevant resources after the first build is completed. Then before building, use the antrun plugin to unzip it and put it under the project without downloading it.
<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>
I put this file gulp.zip, because after the first successful build, there will be under the project, mainly the two directories node and node_modules in the root directory are packaged into gulp.zip
2. The converted js files in jsp cannot be replaced. In most cases our path is ${ctx}/js/jquery.js or ${ctx}/css/style.css like this. But that doesn't seem to be the case with front-end builds. The reason for the error is that the matching path is a little different from what we want. Therefore, we need to modify the code of the following plugin.
The plugin that needs to be modified is: Index.js in gulp-rev-collector. I will attach this file.
3.js file does not add md5 string or replace, please check if your configuration is correct. Please check if "scripts" in gulpfile.js contains your js. This configuration is only available because we have fixed and some replacements here. If you expect all js to participate in encrypted replacement, you can consider configuring it as dist_tmp/**/*.js