Grunt是一个简单好用的js文件压缩和合并工具,当一个页面需要加载过个js文件时,合并多个js文件可以减少http请求次数,提高页面加载速度。另外,Grunt的uglify功能可以起到混淆和隐藏js代码逻辑作用。
安装nodejs和Grunt命令行
Grunt运行nodejs环境中,通过npm进行安装。Grunt 0.4.x 需要Node.js 版本 >= 0.8.0。
nodejs的安装这里不再赘述,可以根据使用的操作系统选择合适的方式进行安装。例如在Centos系统下可以用如下命令安装:
yum install -y nodejs
更新npm到最新版本:
npm update -g npm
然后安装Grunt命令行环境
npm install -g grunt-cli
配置Grunt工程环境
一个Grunt工程环境就是Grunt要在其中工作的目录,配置完毕后可以对该目录下的js进行压缩和合并。
假设我们的工程目录结构如下:
./
./js
./dist
./ 为我们的而工程根目录
js 目录下存放需要压缩合并的js文件
dist 目录存放我们稍后合并输出的文件。
在工程根目录下放置两个文件: package.json
和 Gruntfile.js
。
这是两个必要的文件,也是最重要和容易出错的环节,一定要记着将你最新编辑的文件放置到工程根目录下。
package.json用于定义工程的名称、版本和所以来的Grunt插件信息,内容如下:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
name
和 version
可以根据实际情况定义,其他原样保留。
编辑完package.json
后,在工程根目录下运行命令:
npm install grunt --save-dev
这个命令的目的是安装最新的Grunt命令,并安装package.json
中定义的依赖信息。
然后编辑Gruntfile.js 文件,这个文件定义Grunt工作的所有任务细节,格式如下:
module.exports = function(grunt) {
//工程配置:输入、输出、选项等
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
build: {
src: ‘js/*.js‘,
dest: ‘dist/output.min.js‘
}
}
});
// 加载 "uglify" 插件.
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// 任务,可以是多项,这里只对代码进行压缩
grunt.registerTask(‘default‘, [‘uglify‘]);
};
uglify 代码压缩任务入口,可以并行执行多向任务,此文档仅仅演示代码压缩合并。
src 输入文件,支持使用通配符、正则表达式或文件列表,*.js表示压缩合并所有js文件。
dest 压缩后的文件输出位置。
执行Grunt命令
以上工作准备完毕后,在工程根目录下执行Grunt命令:
grunt
如果没有错误,将输出压缩结果文件。
有时候会出现缺少某些插件的错误,根据错误提示安装即可。例如出现:
Local Npm module "grunt-contrib-uglify" not found. Is it installed?
根据提示安装即可:
npm install grunt-contrib-uglify
...
By 云视睿博王工,转载请注明出处。