maven项目中整合grunt构建工具（二）-js合并、压缩技术

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

转载于:https://my.oschina.net/yxwblog/blog/607346