官网

官方英文版：http://gruntjs.com/

中文翻译版：http://www.gruntjs.org/article/home.html

背景

前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。百度有FIS， 腾讯有Modjs，360有燕尾服，还有很多团队在使用Ant，Shell等。而Grunt乐意成为目前最好的前端构建框架。

简介

Grunt是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。它可以更好的帮助一个团队更好的提高效率、减少错误率。它不仅仅是构建工具，实际上它只是任务运行器，管理每个子任务的自动化运行。

功能

Grunt就是一个工具箱，就像一个百宝箱，拥有非常丰富的任务插件，可以帮助开发人员实现各式各样的构建目标。

在Grunt工具箱中，按任务目标我们可以分为：

编译文档型：比如编译LESS、Sass、Stylus、Coffeescript等；

文件操作型：比如说合并、压缩JavaScript、CSS、图片等；

质量保障型：比如JSHint、Jasmin、Mocha等；

类库构建型：比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的，但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

目的

为了自动化。对于前端项目，为了明确模块分工，会将JavaScript、CSS代码拆解成很多个模块，每个都有独立的一个个文件。过多文件会增加Http请求，从性能的角度来考虑，不利于页面优化。所以我们需要合并这些JavaScript和CSS文件。这样一来，也期望有一种工具能代替我们手工操作，去完成这些任务。

在项目发布之前，都需要做一个步骤，那就是尽可能的将项目中的文件进行尽可能压缩，比如JavaScript、CSS、images甚至是HTML文件，主要目的是减小加载文件的带宽。另外，在很多情况为了安全性考虑，我们需要对我们项目的源代码做一些单元测试和回归测试。然而这些工作都是一些重复性的、乏味的工作。对于一个小型项目来说，或许没有太大的感觉，但对于一个大中型的项目，特别的参与人员过多的项目时，这些工作就显得更重要了。同时让大家更觉得自动化工具是多么的重要。

缺点

英文文档，命令行操作，新手较难上手。但是随着grunt的流行，中文文档也在逐渐增加。

各个构建工具的比较

Shell

优点：调用 yuicompressor、cssmin 来压缩文件，非常简单

缺点：

不能自动下载依赖的外部命令，比如 yuicompressor/cssmin

缺乏变量替换功能

难以跨平台

代码难以维护

Ant

优点：

内置了一些常见任务，比如文件复制、合并、变量替换等，并且可以方便的通过编写自定义任务来扩展。得益于 Java 灵活的扩展性，Ant 任务可以非常方便的在各个项目之间分享，很好的解决了 shell 脚本代码难以维护和迁移的缺点。Ant 还可以结合 ivy 自动解决依赖，实现了完全的跨平台支持。

缺点：它是 Java 写的。Ant 如果要执行 js 代码，就必须通过 rhino，速度比 nodejs 慢了不少。速度慢是明显的缺点，如果涉及的文件过多，ant可能要处理10分钟，而grunt可以再1-2分钟解决。

Jake

优点：得益于 nodejs，Jake 执行 js 代码压缩的速度非常快，而且开发调试也更加方便

缺点：不同项目间的 Jake 任务难以重用，项目大了以后 Jakefile 依然很难维护，面对一个上千行的 Jakefile，和面对一个几百行的 shell 脚本的感觉差不了太多。

好用的构建框架应该具有以下三个特点：

跨平台（Ant, Jake）

易维护、易迁移（Ant）

开发简单（Shell，Jake）

grunt 就是同时具有以上三个特点的前端构建框架。

grunt

grunt 是一个开源的基于任务 (Task) 的前端构建框架。它除了有 Jake 的优点（跨平台、开发简单）以外，还有一套设计良好的 task 框架用来组织各种构建任务。grunt 内置了几个非常常见的构建任务：

concat – 组合各种文件

lint – 用 JSHint 检查代码

min – 用 UglifyJS 压缩代码

qunit – 跑 QUnit 单元测试

watch – 当源代码文件发生变化时自动执行任务

除此之外还可以通过 npm 来方便的获取几百个现成的 task，比如用 closure 而不是 UglifyJS 来压缩 js，或者用 less 来生成 css，又或者用 jslint 而不是 jshint 来检查语法等，这些任务都可以在 npm 上找到。如果这些任务无法满足你的需求，grunt 还允许你方便的添加自定任务，就像写 nodejs 代码一样简单。自定任务还可以发布到 npm 上，通过 npm 在多个项目中共享这些任务。

教程

官网（官方英文版）：http://gruntjs.com/

官网（中文翻译版）：http://www.gruntjs.org/article/home.html

W3cplus教程：

初涉Grunt：http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

安装Grunt：http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html

使用Grunt启动和运行：http://www.w3cplus.com/tools/get-up-running-grunt.html

使用Grunt快乐编码：http://www.w3cplus.com/tools/happy-coding-using-grunt.html

项目构成

众多插件：包含在node_modules文件夹

依赖模块：package.json

配置文件：Gruntfile.js