maven项目中整合grunt构建工具（二）

来自： http://my.oschina.net/yxwblog/blog/607346

1、使用grunt-contrib-concat插件，对多个js进行合并，在package.json中配置插件信息，代码如下

{     "name":"xuewenyu-ui",     "version":"0.0.1",     "dependencies": {        "grunt": "~0.4.5",        "grunt-cli": "~0.1.13",        "grunt-contrib-concat": "~0.5.1"     },     "devDependencies": {}  }

2、在src目录下创建inc目录，并创建两个js文件。

3、编写GruntFile.js文件

module.exports = function(grunt) {      grunt.initConfig({          pkg : grunt.file.readJSON('package.json'),          // js 合并          concat : {              demo : {                  src : [ 'src/inc/*.js' ],                  dest : 'src/dest/<%= pkg.name %>.js'              }          }          //可以增加多个任务，用于发布到不同环境      });        // 加载插件      grunt.loadNpmTasks('grunt-contrib-concat');        // 注册任务      grunt.registerTask('default', [ 'concat' ]);  };

4、mvn clean install一下，会在src/dest目录下多了一个文件

这个文件就是我们合并多个js后得到的一个新的js，测试成功。

5、使用grunt-contrib-uglify插件，对js进行压缩，在package.json中增加插件配置

{     "name":"xuewenyu-ui",     "version":"0.0.1",     "dependencies": {        "grunt": "~0.4.5",        "grunt-cli": "~0.1.13",        "grunt-contrib-concat": "~0.5.1",        "grunt-contrib-uglify": "~0.11.0"     },     "devDependencies": {}  }

6、在GruntFile.js中配置压缩js信息

module.exports = function(grunt) {      grunt              .initConfig({                  pkg : grunt.file.readJSON('package.json'),                  // js 合并                  concat : {                      demo : {                          src : [ 'src/inc/*.js' ],                          dest : 'src/dest/<%= pkg.name %>.js'                      }                  },                  uglify : {                      options : {                          banner : '/*! <%= pkg.name %><%= grunt.template.today("dd-mm-yyyy") %>*/\n'                      },                      dist : {                          files : {                              'src/dest/<%= pkg.name %>.min.js' : [ 'src/dest/<%= pkg.name %>.js' ],                          }                      }                  }              });        // 加载插件      grunt.loadNpmTasks('grunt-contrib-concat');      grunt.loadNpmTasks('grunt-contrib-uglify');        // 注册任务      grunt.registerTask('default', [ 'concat', 'uglify' ]);  };

7.mvn clean install,查看dest目录下，多出一个min.js的文件，查看下

此时，这个文件就是我们多个js合并压缩后的产物，web引入这个文件，就可以了。