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'); //加载插件
}