Grunt插件之uglify--js代码压缩与合并

      平时在开发项目的时候，都是在本地测试，加载代码都是走localhost，页面刷新基本是秒出，所以没有考虑js文件的大小。最近项目上线，部署到了服务器上之后，测试的时候发现加载速度特别慢，一查看网络，发现有的js文件加载时间居然超过1s。没办法，把代码压缩看看。果然压缩好之后加载快了很多。而将代码压缩和混淆之后，也能提高网站的安全性。

下面是使用grunt的uglify插件的安装和使用：

前提：安装了nodejs
环境：window linux iOS 通用

首先安装grunt-cli,即grunt的命令行工具，安装好之后，会将其添加到系统环境里，在系统上的任何地方都能使用grunt命令。

使用npm安装grunt-cli, nodejs自带npm包管理工具， 安装好nodejs之后，npm也就安装上了。
在系统的任何地方执行下面的命令：

npm install -g grunt-cli

安装了grunt-cli之后并不等于安装了grunt，因为grunt是随工程安装的，这样的话，可以创建多个grunt工程，在各自的工程下安装grunt工具。想要运行某一工程的话，只需要在其工程目录下运行grunt命令即可。

创建grunt项目，并安装uglify插件。

在任意目录下执行命令安装grunt和uglify插件，执行命令（本例在uglify目录下）：

npm install --save grunt grunt-contrib-uglify

安装好之后，目录下回出现node_modules子目录，里面是node模块的安装位置，grunt和uglify就被安装在里面。

初始化项目：

在uglify目录下创建空文件Gruntfile.js。
在uglify目录下执行命令：

npm init

如果没有必要的修改，就一路回车，最后输入yes。初始化项目完成之后，uglify目录下会出现package.json文件，这个文件保存了项目的基本信息和入口文件等。

现在我们来编辑项目的入口文件Gruntfile.js文件。也就是package.json的main字段指定的文件，这两者必须一致。

将以下代码复制到Gruntfile.js 里：

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {                //制定插件的名字
           build: {              //制定任务的名字 
              options: {
                mangle: false   //默认混淆变量名和函数名
              },
              files: [{
                  //将数组中的文件合并 并且压缩到combine文件里
                 'dist/combine.js':['src/a.js','src/b.js','src/c.js','src/d.js']
              }]
           }  
        }  
     }); 
     grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
})

运行工程：

grunt uglify

这样的话，执行uglify下的所有任务（如包含多个任务的话），如果想只运行某一个任务的话，可以这样执行：

grunt uglify:build  

这样的话就只会执行uglify下的build这个任务。

上面是代码压缩的最基本的配置，下面是更多的配置，包括：
1、代码混淆的规则
2、非ascii码的处理规则
3、压缩文件的注释
4、压缩文件的格式控制
5、批量压缩的配置
6、生成sourcemap文件
7、对IE浏览器的兼容性设置
8、更多的demo请移步github

1、代码混淆的规则

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {                //制定插件的名字
          build: {  //这个任务的名字叫做build
              options :{
                mangle : false   //不混淆函数名和变量名 默认会混淆
              },
               files: [{      
                  'dist/uncombineAndMangle.js':['src/b.js'] //合并压缩
               }]
            }
          },
          compress_mangle_except: {
            files: {
                  'dist/compress_mangle_except.js': ['src/b.js']
            },
            options: {
              mangle: {
                except: ['dom','JQuery']  //不混淆该数组中的变量名
              }
            }
          },

          compress_mangle_beautify: {
             files: {
                'dist/compress_mangle_beautify.js': ['src/b.js']
             },
             options: {
                beautify: true,    //混淆但不压缩文件 
                footer: '\n// This is a footer.'          //在压缩文件底部加上注释
             }
          },

     }); 
     grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
})

运行所有任务

grunt uglify

运行单个任务

grunt uglify:build

grunt uglify:compress_mangle_except

grunt uglify:compress_mangle_except

...

2、非ascii码的处理规则

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {       
            ASCIIOnly: {
              src: 'src/b.js',
              dest: 'dist/asciionly.js',
              options: {
                mangle: false,
                ASCIIOnly: true   //允许将非ascii字符编码成\uxxx格式（unicode编码）汉字会被编码
              }
            },
        }
    })
    grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
}

执行任务

grunt uglify:ASCIIOnly

3、压缩文件的注释

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {       
            comments: {
              src: 'src/b.js',
              dest: 'dist/comments.js',
              options: {
                    mangle: false,
                    preserveComments: 'some',  //保留哪些注释  可选false all some Function
                    footer: '\n// This is a footer.'          //在压缩文件底部加上注释
              }
           }
        }
    })
    grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
}

4、压缩文件的格式控制

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {       
             maxLineLen: {
              src: 'src/b.js',
              dest: 'dist/maxLineLen.js',
              options: {
                mangle: false,
                maxLineLen: 1000   //设置压缩文件每行的字符长度
              }
            },
            exportAll: {
              src: 'src/b.js',
              dest: 'dist/exportAll.js',
              options: {
                mangle: false,                    
                wrap: 'testExport',         //封裝成閉包，将全局变量挂载到testExport下 然后暴露出来
                exportAll: true             //将函数封装成闭包之后，暴露所有全局变量
              }
            },
        }
    })
    grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
}

5、批量压缩的配置

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {       
            batch: {
              expand : true,            //将占位符*展开 即使用占位符匹配文件名
              src: 'src/**/*.js',       //压缩src目录及所有子目录下的js文件
              dest: 'dist',             //压缩文件存放到dist目录下的同名目录
              ext: '.min.js',           //压缩文件的后缀名
           },
        }
    })
    grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
}

6、生成sourcemap文件

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {       
            sourcemap_basic: {
              src: 'src/b.js',
              dest: 'dist/sourcemap_basic.js',
              options: {
                sourceMap: true,     //压缩的同时  产生sourcemap 默认保存在压缩文件的同一目录
                sourceMapName: 'dist/source_map_custom_name'  //指定sourcemap的文件名 不指定则以压缩文件名+.map为文件名
              }
            },

            sourcemap_multipleFunctionNames: {
                src: 'src/*.js',
                dest: 'dist/',
                expand:true,  
                options: {
                   sourceMap: true,             //压缩的同时  产生 sourcemap
                   sourceMapRoot : 'dist/maps/', //指定source的根目录
                   sourceMapName: function(dist){    //用函数计算出sorurcemap的文件名
                      return dist + ".func.min.js.map"
                   }
                }
            },
        }
    })
    grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
}

7、对IE浏览器的兼容性设置

module.exports = function (grunt) { 
    grunt.initConfig({  
        uglify: {       
            screwIE8: {
              src: 'src/b.js',
              dest: 'dist/screwIE8.js',
              options: {
                screwIE8: false          //是否兼容ie8及以下
              }
            },
        }
    })
    grunt.loadNpmTasks('grunt-contrib-uglify'); //加载插件 
}