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引入這個文件，就可以了。