maven集成gulp压缩js,css方案

---

title: maven集成gulp压缩js,css方案 tags:

• maven
• gulp
• 前端
• js压缩 categories: 工作日志 date: 2017-02-25 18:18:54

---

背景

略  网站优化之——高性能网站建设指南

方案

关于maven的使用想必大家都比较熟悉了，本次在项目中使用基于gulp的方案压缩js，css。

看到这如果大家问到为啥不使用YUI Compressor的想必都是好同学~~~使用yui方案使劲戳使用YUI Compressor Maven插件压缩 js,css 输出war包，

至于为啥不使用yui方案欢迎同学拍砖留言备注。

实施

1. 使用maven的前端插件，下载安装node npm等依赖

       <plugin>
           <groupId>com.github.eirslett</groupId>
           <artifactId>frontend-maven-plugin</artifactId>
           <!-- Use the latest released version:
           https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
           <version>1.3</version>
           <executions>
               <execution>
                   <id>install node and npm</id>
                   <goals>
                       <goal>install-node-and-npm</goal>
                   </goals>
                   <phase>generate-resources</phase>
                   <configuration>
                       <nodeVersion>${project.build.node.version}</nodeVersion>
                       <npmVersion>${project.build.npm.version}</npmVersion>
                       <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
                       <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
                   </configuration>
               </execution>
               <execution>
                   <id>npm install</id>
                   <phase>generate-resources</phase>
                   <goals>
                       <goal>npm</goal>
                   </goals>
                   <configuration>
                       <arguments>install</arguments>
                   </configuration>
               </execution>
               <execution>
                   <id>gulp build</id>
                   <phase>generate-resources</phase>
                   <goals>
                       <goal>gulp</goal>
                   </goals>
                   <configuration>
                       <arguments>${gulp.build}</arguments>
                   </configuration>
               </execution>
           </executions>
       </plugin>
复制代码

关注到此处可以指定node&npm的version，方便不同的环境，同时指定了淘宝的npm源，比官网快许多。工作原理很简单该插件会将node npm下载到maven的本地仓库中（通常为~/.m2),同时将依赖安装到pom同级目录下
复制代码

2. 添加依赖文件

       {
         "name": "f6-erp",
         "version": "1.0.0",
         "description": "F6养车连锁就是diao！！！",
         "main": "index.js",
         "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1"
         },
         "homepage": "http://m.f6car.com",
         "repository": {
           "type": "svn",
           "url": "http://192.168.1.250/svn/f6car/src/f6-erp"
         },
         "author": "qixiaobo",
         "license": "ISC",
         "dependencies": {
           "gulp": "latest",
           "gulp-less": "latest",
           "gulp-rev": "latest",
           "gulp-clean-css": "latest",
           "gulp-uglify": "latest",
           "gulp-concat": "latest",
           "gulp-sourcemaps": "latest",
           "del": "latest",
           "gulp-rev-replace": "latest",
           "gulp-replace": "latest"
         }
       }
``` plain
    
3.  添加gulp任务
```javascript
       var gulp = require('gulp'),
           rev = require('gulp-rev'),
           cleanCss = require('gulp-clean-css'),
           uglify = require('gulp-uglify'),
           concat = require('gulp-concat'),
           sourcemaps = require('gulp-sourcemaps'),
           del = require('del'),
           revreplace = require('gulp-rev-replace'),
           replace = require('gulp-replace'),
           less = require('gulp-less');
       var path = {
           css: 'src/main/webapp/css',
           js: 'src/main/webapp/js',
           jsp: 'src/main/webapp/page',
           less: 'src/main/webapp/less'
       };
       var destPath = {
           css: 'src/main/webapp/dist/css',
           js: 'src/main/webapp/dist/js',
           jsp: 'src/main/webapp/dist/page',
           less: 'src/main/webapp/dist/css'
       };
        
       gulp.task('del', function () {
           return del([
               'rev-manifest.json',
               destPath.css + '/**/*.css',
               destPath.js + '/**/*.js',
               destPath.jsp + '/**/*.jsp'], function (err, deletedFiles) {
               console.log('Files deleted:\n', deletedFiles.join('\n'));
           });
       });
        
       gulp.task('css-min', ['del'], function () {
           return gulp.src(path.css + '/**/*.css')
               .pipe(cleanCss())
               .pipe(rev())
               .pipe(gulp.dest(destPath.css))
               .pipe(rev.manifest())
               .pipe(gulp.dest(''));
       });
       gulp.task('less', ['css-min'], function () {
          return gulp.src(path.less + '/**/*.less')
               .pipe(sourcemaps.init())
               .pipe(less())
               .pipe(cleanCss())
               .pipe(rev())
               .pipe(sourcemaps.write())
               .pipe(gulp.dest(destPath.less))
               .pipe(rev.manifest({base: '', merge: true}))
               .pipe(gulp.dest(''));
       });
       gulp.task('js-min', ['css-min'], function () {
           return gulp.src(path.js + '/**/*.js')
               .pipe(sourcemaps.init())
               .pipe(uglify())
               .pipe(rev())
               .pipe(sourcemaps.write('.'))
               .pipe(gulp.dest(destPath.js))
               .pipe(rev.manifest({base: '', merge: true}))
               .pipe(gulp.dest(''));
       });
        
       gulp.task('page', ['css-min', 'less', 'js-min'], function () {
           var manifest = gulp.src("rev-manifest.json");
           return gulp.src(path.jsp + '/**/*.jsp')
               .pipe(revreplace({replaceInExtensions: ['.jsp'], manifest: manifest}))
               .pipe(replace(/\/(.*)(-.*)\.jsp/g, '/$1.jsp'))
               .pipe(gulp.dest(destPath.jsp))
       });
        
        
       gulp.task('default', ['page'], function () {
       // place code for your default task here
       });
``` plain
   此处有个陷阱，各位可以考虑一下(replace(/\\/(.*)(-.*).jsp/g, ‘/$1.jsp’))
   
    的目的是为啥？
   
    通过gulp任务运行之后将会根据js的文件内容生成对应的版本号，同时将代码中对应引用该js的地方进行替换
   
    生成的rev对应关系默认将会存储在rev-manifest.json文件中，形如
```json
       {
         "adjust/adjust.js": "adjust/adjust-61f499975b.js",
         "adjust/adjustList.js": "adjust/adjustList-17a7ed5e56.js"
       }
复制代码

 
复制代码

4. 打war包

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.1.1</version>
            <configuration>
                <warName>${project.build.name}</warName>
                <warSourceExcludes>
                    js/**,css/**,page/**,dist/**
                </warSourceExcludes>
                <webResources>
                    <resource>
                        <directory>${war.generate.dir}</directory>
         
                        <filtering>false</filtering>
         
                    </resource>
                </webResources>
            </configuration>
        </plugin>
复制代码

此处通过打包的时候排除掉对应的js，css，page文件夹，将gulp生成的文件夹丢进即将打成的包中，完成生产与开发的隔离。

此处也有陷阱 <filtering>false</filtering>

该选项会关闭maven war插件的autoconfig选项，autoconfig将会进行变量替换 参考此处[注意maven打包的filter][maven_filter]    至此 完成了js，css的文件压缩&替换
复制代码