js中的牛：grunt

从项目开始就一直在往bash里敲的几个命令：grunt server。现在简化了，直接grunt一下，就可以让app在chrome上跑起来了，总觉得很神奇，一直不知道grunt到底是干了些啥，最早晓得只是知道它和yeoman一道的，但具体干啥的呢，知道今天看了一篇神贴，还是觉的自己得码下字，才是自己的货。

grunt是啥？

一个专门为js提供的构建工具。

啥是构建工具？

项目开发时，会有开发分支，部署发布时，会有可以发布的版本，那么对于用js开发的项目，这可发布版本必然是要经过一系列的优化的，也就是通常可以看到的将源文件压缩、合并、测试、删除临时文件呀等等，不管是js文件还是css文件，之后输出。这其中还包括提取业务代码中要依赖什么样的模块等一系列繁琐重复的工作。构建工具就是将这些活干了的，也就是我们认为这些活是被自动完成的。也可以将构建工具理解为通常所说的“自动化工具”。

构建工具是如何干活的？

举个最简单的例子，因为是自动化过程对吧，相当于你写一个任务单（也就是通常的package.json文件），然后grunt就像个怪兽电力公司里的那个工厂一样，Mike Wazowski（那个大眼仔怪兽）就会按照任务列表里的tasks一项项给你checked的。要注意的是：grunt只负责执行任务，不管你具体任务都干了些什么勾当。

那么具体构建流程是怎样？

加入我们这边有一份任务清单：

clean：删除临时文件
compress：压缩
qunit：测试
concat：合并
merge：整合
...

那么任务流程表在grunt工厂里会变成这样，这个流程表就放在了gruntfile.js这个文件里了（命名大小写可能不同，但大同小异）：

task1: clean
task2: compress/uglify
task3: qunit
task4: concat
task5: merge
task6: ...

而具体的构建又分为三部分：

1. transport：将信息不完备的模块转换为信息完整的模块，命令：grunt-cmd-transport
2. concat：合并文件，将一系列文件打包成可发布版本，命令：grunt-cmd-concat
3. minify：压缩代码（用uglify表示压缩也有道理，因为压缩后代码确实丑化了），命令：grunt-contrib-uglify

至于grunt在项目中的运用，等我回头搞定项目之后，有功夫再写写，哦，对了，grunt是基于node.js的。

详情请戳

grunt只负责构建，那具体功能在哪里实现呢？

grunt本身仅是一个执行器，大量的功能都存在于npm管理的插件当中。特别是以grunt-contrib-...开头的核心插件，覆盖了大部分核心功能，比如：

handlebars, jade, less, compass, jshint, jasmine
clean, concat, minify, copy, uglify, watch

通过提供通用的接口以进行代码规范检验（Lint）、合并、压缩、测试及版本控制等任务，grunt使入门门槛大大降低了。

那么grunt怎么用呢？

gurnt在目前的版本下，已经不再作为一个整体全局模块安装了，而是分成三个部分：

grunt           -- 作为项目或插件的依赖包而单独存在
grunt-cli       -- 用于命令行启动grunt，必须作为全局模块安装：`npm install -g grunt-cli`
grunt-init      -- 可选的，用于在命令行新建grunt项目模版，`npm install -g grunt-init`

新建项目工程

通过grunt init在命令行跑起来，无论新建的项目是应用程序还是grunt插件，grunt生成的工程都是一个标准的npm模块。而新工程目录下有两个非常重要的文件：

• package.json：npm发布的配置文件，包括了包依赖信息和项目工程的元数据
• Gruntfile.js：grunt的配置文件，用于配置或定义grunt任务，以及加载grunt插件

一个常见的Gruntfile.js文件其实就是一个标准的Node.js模块定义：

module.exports = function(grunt) {

    // 项目配置信息，以JSON对象的方式存放，可以用js函数动态生成
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: { ... }
    });

    // 加载uglify插件
    grunt.loadNpmTasks("grunt-contrib-uglify");

    // 注册默认任务
    grunt.registerTask("default", ["uglify"]);

};

进入到项目所在的文件夹下（已经安装了相应版本的grunt），然后在命令行中跑grunt，那么grunt就会先去找到当前文件夹下的Gruntfile.js，注意G一定要大写，那么之后grunt就可以根据Gruntfile.js这个配置文件来执行所有的自动化任务，当然，也可以选择性地执行某些任务，甚至给不同的插件附加命令行参数。