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

本文主要是介绍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: {  //这个任务的名字叫做buildoptions :{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 Functionfooter: '\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,             //压缩的同时  产生 sourcemapsourceMapRoot : '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'); //加载插件 
}

这篇关于Grunt插件之uglify--js代码压缩与合并的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---