我们在开发过程中经常需要构建（Build），通常构建是一种重复性的工作，例如：编译 TypeScript 成 ES5、编译 SASS 成 CSS、合并脚本样式、压缩脚本和样式、改变文件结构、给文件重命名等等，这一系列的操作如果项目结构固定后基本是一成不变的操作；它好像是把各种食材（代码）倒入到搅拌机，最终经过搅拌机的搅拌成了最终的果汁（部署的程序），如果某种果汁的食谱定型了，搅拌的过程也会固定，这样只需要设定好相应的步骤就可以完成最终的产物。
当然这种重复性的工作我们都用这种流程化的工具来完成，现在有很多的自动化构建的工具 Grunt、Gulp 等等，这里主要讲的是 Grunt。
什么是 Grunt
Grunt 是前端世界的构建工具，它依托于 Node.js 的 npm 有着庞大的生态系统，你可以在众多的插件中像搭积木一样完成自己的构建，如果你找不到插件，也可以自己动手创造一个 Grunt 插件。
安装 Grunt
安装 Node.js
Grunt 和 Grunt 插件是通过 npm 安装并管理的。npm 是一个 node 包管理和分发工具，已经成为了非官方的发布 node 模块（包）的标准。有了 npm ，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。
常用命令
- npm update -g
- npm install -g [model-name]
n 模块
n 模块是用来快速更新 node 版本的模块
- npm install -g n
- n stable 更新到最近的稳定版本
- n v0.10.26 更新到具体版本
nrm 模块
nrm 是一个 NPM 源管理器，允许你快速地在如下 NPM 源间切换
- npm install -g nrm
- nrm ls
- nrm use taobao
- nrm add <registry> <url> [home]
- nrm del <registry>
- nrm test npm
- nrm test
安装 Grunt-CLI
运行 Grunt 之前需要安装 Grunt 命令行
- [sudo ]npm install -g grunt-cli
- [sudo ]npm uninstall -g grunt
安装 Grunt 和 Grunt 插件
安装指定插件并配置到 package.json 中：
[sudo ]npm install [module-name ]--save-dev
安装 package.json 中的所有插件：
[sudo ]npm install
初始化 Grunt 项目（Gruntfile.js）
[sudo ]npm init
使用
创建 Grunt 项目
//Gruntfile.js
moule.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
//codes......
});
}
创建一个拷贝任务
//Gruntfile.js
moule.exports = function(grunt) {
//codes......
grunt.initConfig({
copy: {
taskA: {
src: 'a.html',
dist: 'dist/a.html'
},
taskB: {
src: ['b.html', 'b1.html'],
dist: 'dist/b.html'
}
}
});
}
执行任务
通过命令行进入到 Gruntfile.js 文件目录，执行grunt TaskName来运行对应的命令，例如执行上面的拷贝命令：
grunt copy:taskA
Grunt 常用插件
- Js 文件校验：grunt-contrib-jshint
- 文件拷贝：grunt-contrib-copy
- 文件删除：grunt-contrib-clean
- 文件合并：grunt-contrib-concat
- Sass 解析：grunt-contrib-sass
- Css 压缩：grunt-contrib-cssmin
- Html 压缩：grunt-contrib-htmlmin
- Js 压缩混淆：grunt-contrib-uglify
- 静态资源文件模版：grunt-usemin
- 静态资源文件版本：grunt-rev
- 任务运行时间插件：time-grunt
- 加载 Grunt 插件：load-grunt-tasks
- 自动添加样式前缀：grunt-autoprefixer
- ...
集成到 Sublime
配置 Sublime 的 Build System Tools > Build System > New Build System Grunt.sublime.build
{
"cmd": ["grunt", "--no-color”, “build"],
"path": "/bin:/usr/bin:/usr/local/bin",
"working_dir": "${project_path:${folder}}",
"selector": ["Gruntfile.js"]
}
