传统javaweb工程整合nodejs压缩js,css,html

传统JAVAWEB工程使用插件压缩js,css,html

• 目前传统javaweb项目前后端未分离，项目访问量大，重构成本高。
• maven插件frontend-maven-plugin可以在java项目中混合使用node和npm来打包前端代码
• 让java工程具备node项目中有用的所有的功能，包括（gulp打包，压缩，webpack打包压缩）
• 此插件给传统的前端工程带来新生。。。

1.先上目录结构

一图看懂frontend-maven-plugin插件结构

2.在maven中配置前端插件

<build>
  <plugins>
    <plugin>
      <groupId>com.github.eirslett</groupId>
      <artifactId>frontend-maven-plugin</artifactId>
      <version>1.11.3</version>
      <configuration>
        <!-- 指定插件的工作目录，在工程跟路径下的gulp文件夹 -->
        <workingDirectory>gulp</workingDirectory>
         <!-- 指定插件中使用到的node和npm的安装目录，在工程跟路径下的gulp文件夹 -->
        <installDirectory>gulp</installDirectory>
      </configuration>
      <executions>
        <execution>
          <id>install node and npm</id>
          <!--插件中执行的指令，下载node和npm-->
          <goals>
            <goal>install-node-and-npm</goal>
          </goals>
          <phase>generate-resources</phase>
          <configuration>
            <!--指定node的版本-->
            <nodeVersion>v10.5.0</nodeVersion>
            <!--指定npm的版本-->
            <npmVersion>6.1.0</npmVersion>
            <!--指定node的下载地址-->
            <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
            <!--指定npm的的下载地址-->
            <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
          </configuration>
        </execution>
        <execution>
          <id>npm install</id>
          <phase>generate-resources</phase>
          <!--执行npm install安装package.json中的依赖-->
          <goals>
            <goal>npm</goal>
          </goals>
          <configuration>
            <arguments>install</arguments>
          </configuration>
        </execution>
        <execution>
          <!--执行gulp命令，对html,js,css进行压缩-->
          <id>gulp build</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>gulp</goal>
          </goals>
          <configuration>
            <arguments>default</arguments>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

3.执行npm install的时候package.json

{
  "name": "cpmpress",
  "version": "1.0.0",
  "description": "batch cpmpress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp default"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-replace": "^1.1.3",
    "gulp-uglify": "^3.0.2",
    "rev-hash": "^3.0.0",
    "uglify-js": "^3.14.1"
  },
  "devDependencies": {}
}

4.gulp执行的时候需要的配置变量config.js

/* gulp命令会由gulpfile.js运行，所以src和build文件夹路径如下（根目录下） */
let src = '../src/main/resources/static';
let dest = '../target/classes/static';

module.exports = {
    js: {
        src: src + "/**/*.js",
        dest: dest
    },
    css: {
        src: src + "/**/*.css",
        dest: dest
    },
    html: {
        src: src + "/**/*.html",
        dest: dest
    }
}

5.maven插件运行的gulpfile.js

/*引入gulp及相关插件 require('node_modules里对应模块')*/
let config = require('./config');
let gulp = require('gulp');
let minifyCss = require("gulp-minify-css");
let uglify = require('gulp-uglify');
let minifyHtml =  require('gulp-minify-html');
let replace = require("gulp-replace");

//js和css后面添加 v=hash,防止缓存
const revHash = require('rev-hash');

gulp.task('html', ()=> {
    const options = {comments:false,spare:true};
    return gulp.src(config.html.src)
        .pipe(replace(/(<script[^>]*src=[\"\'])(.+?)([\"\'][^>]*>[\s]*?<\/[^>]*script>)/gi,function (string,key1,key2,key3){
            this.file.revhash = revHash(this.file.contents)
            let content = key1 + key2 + "?v="+this.file.revhash + key3;
            console.log(content);
            return content;
        })).pipe(replace(/(\<link\s(?:.*?) href=[\"\'])(.+?)([\"\'](([\s\S]*?\<\/link\>)|([\s\S]*?>)))/gi,function (string,key1,key2,key3){
            this.file.revhash = revHash(this.file.contents)
            let content = key1 + key2 + "?v="+this.file.revhash + key3;
            console.log(content);
            return content;
        }))
        .pipe(minifyHtml(options))
        .pipe(gulp.dest(config.html.dest))
});

//css压缩
gulp.task('css', ()=> {
    return gulp.src(config.css.src)
        .pipe(minifyCss())
        .pipe(gulp.dest(config.css.dest))
});


//js压缩
gulp.task('js', ()=> {
    return gulp.src(config.js.src)
        .pipe(uglify({
            // 混淆变量名
            mangle: true,
            // 输出时将所有的中文转换为unicode
            output: {ascii_only: true}
        })).pipe(gulp.dest(config.js.dest))
});


//默认任务
gulp.task('default', gulp.series('js','css','html'));

6.配置完成，执行mvn install的时候就可以压缩啦。

效果图如下，js和css效果一样。