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

84 阅读 0 评论 56 点赞

我是靠谱客的博主炙热月饼，这篇文章主要介绍maven项目中整合grunt构建工具（二）-js合并、压缩技术，现在分享给大家，希望可以做个参考。

摘要: 必要性: 在我们的web应用中，往往有很多的js，少一点也有几个几十个，我们通常的做法是在1个界面中引入这些这些资源，然后其他界面都include这个界面，那么问题来了，你要复制很多的代码，不断的写<script>之类的标签，可能你觉得没什么，多复制一下又不是多累的事情，但是你要明白，你每复制一次就等于多了一次http请求，在用户量较大的项目里面，这就成为了性能问题，那么我们应该怎么处理多个js的问题呢，其实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' ]);
};