首页 > 代码库 > grunt前端构建工具使用教程
grunt前端构建工具使用教程
grunt能干些什么？
grunt其实是哆啦a梦的百宝袋，是工具集，拥有非常丰富的任务插件，可以实现各式各样的构建目标。
按任务目标大致可分为四类：
文件操作型：比如合并、压缩js和css文件等（包括）
预编译型：比如编译less、sass、coffeescript等
类库项目构建型：比如 angular、ember、backbone等（这种推荐使用yeoman）
工程质量保障型：比如jshint、jasmine、mocha等
除此之外还有像 watch （监听文件改变，自动触发构建）等功能。
使用工具：
node： http://www.nodejs.org
安装：
window:安装比较傻瓜式，就两步。
1 下载源文件 http://www.nodejs.org/download/ 选择对应的最新msi文件。
2 双击进行安装。
linux：
1 wget下载源文件
打开 http://www.nodejs.org/download/,寻找到自己要下载的文件地址
# wget 源文件路径
2 解压文件
# tar xvf 文件路径
3 进入解压目录
# cd node-v0.8.7
4 检查所需要配置
# ./configure
5 安装
# make install
6 检查是否成功安装，输入命令：
# node -v
配置：
npm node pakeage manage 包管理
国内的npm镜像配置
国内的npm安装由于某种原因总是比较慢，所以需要在做些配置了。
设置 npm 国内镜像
npm config set registry http://registry.cnpmjs.org
可选项:使用cjnpm
grunt：https://github.com/gruntjs/
安装：
grunt的安装需要先安装node才能继续安装。grunt也就是相当于node的一个模块。
1 npm install -g grunt-cli
里边的-g 安装到全局
卸载
npm uninstall -g grunt-cli
2 npm install -g grunt-init
使用grunt-init 进行配置（待补充）
配置：
packjson介绍：用于配置需要拉取的grunt插件信息。
{
"name": "demo",
"version": "1.0.0",
"devDependencies": {
"grunt-contrib-uglify": "~0.2.0"
}
}
里边的devDependecies用于定义需要引入的插件信息，定义你要拉取的依赖模块，上面的代码，拉取grunt-contrib-uglify插件（用于压缩js），字段的值~0.2.0，指明需要模块的版本号，“~”是至少的意思。
使用：npm install 依赖拉取成功后，在demo工程中生成了node_modules目录，该目录就包含了grunt-contrib-uglify插件模块的代码。
实例：创建gruntFile.js文件
module.exports = function(grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成个json数据
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
//文件头部输出信息
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
//具体任务配置
build: {
//源文件
src: ‘src/hello-grunt.js‘,
//目标文件
dest: ‘build/hello-grunt-min.js‘
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// 默认执行的任务
grunt.registerTask(‘default‘, [‘uglify‘]);
};
grunt核心方法：
grunt.initConfig(obj)
initConfig用于配置构建信息，第一个参数必须是个object。
grunt.file.readJSON(path)
读取一个json文件，通常我们会把构建任务的基本配置写在独立的json文件内，方便我们修改。
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成个json数据
pkg: grunt.file.readJSON(‘package.json‘)
});
上面代码，将读取的json赋值给pkg字段，想要获取配置的值，就可以使用pkg.name这样的形式。
grunt.loadNpmTasks(pluginName)
加载指定插件任务，示例代码如下：
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
可以加载多个：
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
//css压缩
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
grunt.registerTask(taskName,taskArray)
注册任务，比如下面的代码：
grunt.registerTask(‘default‘, [‘uglify‘]);
注册默认执行的任务，即你运行grunt命令时，触发的任务构建。
第二个参数为任务目标名，在initConfig()中配置：
grunt.initConfig({
//读取package.json的内容，形成个json数据
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
//文件头部输出信息
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
//具体任务配置
build: {
//源文件
src: ‘src/hello-grunt.js‘,
//目标文件
dest: ‘build/hello-grunt-min.js‘
}
}
});
uglify为任务目标名，options为grunt-contrib-uglify插件配置参数。
banner向输出文件打印你需要的信息。
build为具体任务构建配置
文件的简单正则匹配语法
文件名（目录路径）的匹配，基本上和ant一样。
* 匹配除了/外的任意数量的字符，比如foo/*.js
? 匹配除了/外的单个字符
** 匹配包含/的任意数量的字符，比如foo/**/*.js
! 排除指定文件，比如src: [‘foo/*.js‘, ‘!foo/bar.js‘]
{} 可以理解为“or”表达式，比如src: ‘foo/{a,b}*.js‘
用法举例：
//匹配foo目录下所有th开头的js文件
{src: ‘foo/th*.js‘, dest: ...}
//等价于{src: [‘foo/a*.js‘, ‘foo/b*.js‘], dest: ...}
{src: ‘foo/{a,b}*.js‘, dest: ...}
//优先处理bar.js，然后再处理其他文件
{src: [‘foo/bar.js‘, ‘foo/*.js‘], dest: ...}
//排除处理foo/bar.js文件
src: [‘foo/*.js‘, ‘!foo/bar.js‘], dest: ...}
grunt常用插件 参见：http://gruntjs.cn/
1 常用插件有
grunt-contrib-concat：文件合并
grunt-contrib-copy：用于复制文件或目录的插件
grunt-contrib-clean：用于删除文件或目录的插件
grunt-contrib-compress：用于压缩文件和目录成为zip包
grunt-contrib-jshint：js代码检查
grunt-contrib-mincss：css压缩
grunt-contrib-uglify：js压缩
grunt-contrib-watch：实时监听插件
grunt-contrib-imagemin，能够快速的压缩工程内的图片
grunt-contrib-yuidoc：基于YUIDOC生成js API文档
grunt-karma：单测回归插件
参考网页：http://www.36ria.com/6192
http://www.36ria.com/6226
http://www.36ria.com/6273