平时在开发项目的时候,都是在本地测试,加载代码都是走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'); //加载插件
}