Build front-end automation using node. JS Gulp in the Maven+spring project

At first, I was going to start with a front-end separation, and later found that when using JSP or Freemarker to do dynamic pages, it was not so easy to play with these automated build tools, because we had to teach them to invoke the Java container. Now the global community seems to have no mature plug-in can automatically help us to tune the Java container, Baidu FIS Jello also just do a bit of the velocity of automation, their own writing feel is self-abuse, so in this issue is better than the gulp as a maven to use, Anyway, the Java EE developers should mostly get used to the long, endless build after modifying the code. Conversely, if the gulp is tuned to watchify, only the files that have changed have been rebuilt, then the speed must not be a problem, and we do not have to manually package each modification.

At present, the application of this technology, with gulp mainly to do front-end engineering and code optimization, the reason is not to choose a more robust community grunt, probably mainly because the gulp code is easier to write, and the use of stream to build speed significantly improved. This article uses gulp mainly in order to realize the following functions: Optimize CSS, merge, compress, add MD5 version control, generate map map, optimize JS, combine JS, compress, add MD5 version control, generate map map, optimize JSP paging file, Automatically generates the path of the resource file corresponding to the original file compression. We finally achieve the effect is, the compressed CSS file, a compressed JS file, a JSP page automatically generated corresponding to the MD5 version of the resource file. The reason to add MD5 for file versioning is that MD5 does not change if the file is not modified, so the server's corresponding resources do not need to be replaced. We also have to consider the drawbacks of merging all the same resources into one file, that is, if the content of the site is large, perhaps most of the resources are not exactly what a page needs, which is not an ideal optimization effect. For this issue, we can consider the use of modular management tools such as browserify. A more convenient way is to simply analyze the site's needs for resources. The general site usually has a portal site and a back-office management system, the resources used by the portal pages and the background management system used by the resources may be significantly different, and the two of their own pages in fact the difference is not very large. So we can also specifically design two sets of resources for the portal and backend systems, eliminating the large number of redundant files that can be generated by using the Browserify build.

Before using gulp, we first need to install the node. JS and NPM package management tools. Because we do front-end development under the maven+spring framework, we also need to build good one MAVEN projects before we can formally write the code. A typical MAVEN project can be shown here, where we add 2 Maven project modules, static resources in the WebApp module, dynamic pages in the Web-inf, and after the configuration is complete, the MAVEN project will work as expected.

Similar to MAVEN,NPM and Gulp, the corresponding configuration files are required, respectively, Package.json and Gulpfile.js. The plugins we need to use in Gulp are as follows:

<!-- lang: js -->var gulp = require(‘gulp‘),rev = require(‘gulp-rev‘),minifycss = require(‘gulp-minify-css‘),uglify = require(‘gulp-uglify‘),concat = require(‘gulp-concat‘),sourcemaps = require(‘gulp-sourcemaps‘),del = require(‘del‘),revreplace = require(‘gulp-rev-replace‘);

`npm install package-name --save-dev 指令可以进行对应插件的安装，或者在配置好package.json文件之后，使用`` once installed with NPM install, all these library files are generated into the Node_module folder in the root directory.

The gulp workflow is as follows:

First, create a SRC folder under the project root directory and put the static resources needed by the front end in the folder as source code development. Gulp Workflow First reads these files, carries on the corresponding merge compression processing, finally outputs the product to the MAVEN module corresponding static resource path and the dynamic page path, thus completes the complete set of simple automation constructs the process. In the following example, we build a simple landing page and a background page process, and finally complete the work with a gulp default instruction. First define the file input directory:

<!-- lang: js -->var path = {    css: ‘maven-webapp/webapp/static/css‘,    js: ‘maven-webapp/webapp/static/js‘,    jsp: ‘maven-webapp/webapp/WEB-INF/jsp‘};

Then write a login interface to the CSS compression merge optimization production line. As shown in the following article, in this code we first delete the old file generated by the previous build with the "del" instruction. Where Rev-manifest.json is a set of data that is output from the MD5 version of the tool that records the file name after the merged file has been added to the MD5 version number. Merge 4 files, merge before initializing Sourcemap, so that after processing is completed can generate mapping file, with this mapping file, we can be in Google Browser debugging tool under the form of pre-compression source code. Concat executes the file Merge directive, path defines the file name of the merge result, merges with Minifycss after merging, then adds the MD5 version number to the file, modifies it here, writes out the mapping file, and exports the results to the MAVEN project directory.

<!-- lang: js -->gulp.task(‘login-css-min‘, function() {del([‘rev-manifest.json‘,    path.css + ‘/login.*.*‘,    path.js + ‘/login-bundle.*.*‘,    path.jsp + ‘/login.jsp‘], function(err, deletedFiles) {    console.log(‘Files deleted:\n‘, deletedFiles.join(‘\n‘));});return gulp.src([‘src/css/bootstrap.css‘,    ‘src/css/bootstrap-reset.css‘,    ‘src/css/style-responsive.css‘,    ‘src/css/login.css‘])    .pipe(sourcemaps.init())    .pipe(concat({path:‘login.min.css‘, cwd: ‘‘}))    .pipe(minifycss())    .pipe(rev())    .pipe(sourcemaps.write(‘.‘))    .pipe(gulp.dest(path.css))    .pipe(rev.manifest())    .pipe(gulp.dest(‘‘));});

The merging and compression of JS is similar. However, it is important to note that when we merge JS, we try to use the anonymous function of closures to avoid polluting the global variables with plugins. In the following code, I add a namespace.js file to the top, exposing it to the global environment in order to make it namespace-managed.

<!-- lang: js -->gulp.task(‘login-js-min‘, [‘login-css-min‘], function() {return gulp.src([‘src/js/Namespace.js‘, ‘src/js/lib/jquery.js‘, ‘src/js/main.js‘])    .pipe(sourcemaps.init())    .pipe(concat({path:‘login-bundle.min.js‘, cwd: ‘‘}))    .pipe(uglify())    .pipe(rev())    .pipe(sourcemaps.write(‘.‘))    .pipe(gulp.dest(path.js))    .pipe(rev.manifest({base:‘‘, merge: true}))    .pipe(gulp.dest(‘‘));});

The third step, according to the Rev-manifest.json file name Mapping, the corresponding resource path within the JSP is modified to add the MD5 version number after the path name.

<!-- lang: js -->gulp.task("login-build", [‘login-js-min‘], function() {var manifest = gulp.src("rev-manifest.json");return gulp.src( "src/jsp/login.jsp")    .pipe(revreplace({replaceInExtensions: [‘.jsp‘], manifest: manifest}))    .pipe(gulp.dest(path.jsp));});

The same way to do the background page of the resource merge compression:

<!--lang:js-->gulp.task (' Index-css-min ', function () {del ([' Rev-manifest.json ', Path.css + '/index.*.* ', Path.js + '/index-bundle.*.* ', path.jsp + '/index/*.* '], function (err, deletedfiles) {console.log (' Files deleted:\ N ', Deletedfiles.join (' \ n '));    return gulp.src ([' Src/css/index/jquery.fullpage.css ', ' src/css/index/tipso.min.css ', ' src/css/index/show.css ', ' Src/css/index/style.css '). Pipe (Sourcemaps.init ()). Pipe (Concat ({path: ' Index.min.css ', CWD: '}). Pipe (M    Inifycss ()). Pipe (rev ()). Pipe (Sourcemaps.write ('. ')) . Pipe (Gulp.dest (PATH.CSS)). Pipe (Rev.manifest ()). Pipe (Gulp.dest ("));}); Gulp.task (' index-js-min ', [' index-css-min '], function () {return gulp.src ([' Src/js/namespace.js ', ' src/js/lib/jquery . js ', ' src/js/lib/jquery.*.min.js ', ' src/js/lib/jquery-ui-1.10.3.min.js ', ' src/js/lib/smooth-scroll.min.js ', ' Src/js/lib/tipso.min.js ', ' src/js/lib/transit.js ', ' src/js/index/*.js ']). PIPE (sourceMaps.init ()). Pipe (Concat ({path: ' Index-bundle.min.js ', CWD: '}). Pipe (Uglify ()). Pipe (rev ()). PIPE (Sourcemap    S.write ('. ')) . Pipe (Gulp.dest (path.js)). Pipe (Rev.manifest ({base: ', merge:true}). Pipe (Gulp.dest ("));}); Gulp.task ("Index-build", [' index-css-min ', ' index-js-min '], function () {var manifest = gulp.src ("Rev-manifest.json"); Return gulp.src ("src/jsp/index/*.jsp"). Pipe (Revreplace ({replaceinextensions: ['. JSP '], manifest:manifest}). pipe (Gulp.dest (path.jsp + '/index/');});

Finally, the two steps are merged into the default and the automation is completed.

<!-- lang: js -->gulp.task(‘default‘, [‘login-build‘, ‘index-build‘], function() {// place code for your default task here});

The results are as follows:

If you need to have more than one JSP page share a single resource, you can place the pages in one folder for processing uniformly.

Build front-end automation using node. JS Gulp in the Maven+spring project