Grunt

Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。

Grunt 是什么

Grunt是一个基于JavaScript上的一个很强大的任务管理器(task runner)，或许这么一说让很多人觉得费解，简单来说就是你可以在你的终端机上，用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法，压缩CSS、JavaScript、图像，Sass、LESS和Stylus编译成CSS等等，这些东西很适合用Grunt来解决。

Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。

为什么要用Grunt

或许有很多要都像我一样，会问“为什么要用Grunt”？其实用一句话可以概括出来：为了自动化。对于前端项目，为了明确模块分工，我们可以会将JavaScript、CSS代码拆解成很多个模块，他们都有独立的一个个文件，但这样一来用来页面上，增加了文件个数，同时也产生过多的Http请求，可从性能的角度来考虑，不利于页面优化。所以我们需要合并这些JavaScript和CSS文件。这样一来，也期望有一种工具能代替我们手工操作，去完成这些任务。

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

Grunt能做什么

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

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

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

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

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

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

安装NodeJS

Ubuntu下安装NodeJS

推荐使用源码安装，因为apt-get安装不能控制NodeJS的版本 
首先你要安装一些依赖项：

sudo apt-get install g++ libssl-dev apache2-utilssudo apt-get install git-core

接下来在命令终端执行：

git clone https://github.com/nodejs/node.git

./configure

sudo make

sudo make install

Windows下安装NodeJS

推荐使用安装包进行安装。可以直接进入Nodejs官网中下载各系统所需要的安装包进行安装。（使用安装包安装会自带把NPM也装好）

安装NPM

装好NodeJS后，可以在你的终端执行下面的命令安装NPM:

curl http://npmjs.org/install.sh | sh

如果这样安装失败，或许你要在上面的命令之前加上sudo，并按提示输入你的用户密码。

如果需要检验安装NodeJS或NPM是否要成功，可以通过下面的命令来检验：

$ node -v

v0.12.2

$ npm -v2.7.4

这样你的NodeJS和NPM表示安装成功。

安装Grunt-cli

为了方便使用Grunt，你应该在全局范围内安装Grunt的命令行接口(CLI)。要做到这一点，需要在命令行中执行：

$ npm install -g grunt-cli

这条命令将会把grunt命令植入到你的系统路径中，这样就允许你从任意目录中运行Grunt(定位到任意目录运行grunt命令)。

注意：安装grunt-cli并不等于安装了Grunt任务运行器! Grunt CLI的工作很简单：在Gruntfile所在目录调用运行已安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

安装Grunt

$ npm install grunt

你会在你的命令终端看到下面的安装信息：

npm http 304 https://registry.npmjs.org/underscore.stringnpm 
 http 304 https://registry.npmjs.org/underscore
 grunt@0.4.5 node_modules/grunt
 ├── which@1.0.5
 ├── dateformat@1.0.2-1.2.3
 ├── eventemitter2@0.4.13
 ├── colors@0.6.2
 ├── hooker@0.2.3
 ├── async@0.1.22
 ├── lodash@0.9.2
 ├── coffee-script@1.3.3
 ├── underscore.string@2.2.1
 ├── iconv-lite@0.2.11
 ├── nopt@1.0.10 (abbrev@1.0.4)
 ├── findup-sync@0.1.2 (lodash@1.0.1)
 ├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
 ├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.1)
 ├── rimraf@2.0.3 (graceful-fs@1.1.14)└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

在命令行中输入：

$ grunt --version 

grunt-cli v0.1.13

grunt v0.4.5

表示在项目中已成功安装了Grunt。

配置Grunt

要正确运行Grunt项目，必须依赖于package.json和Gruntfile.js文件。

package.json模板文件:

采用了一种最简单的方式——手工创建package.json文件。而这个文件又是Grunt项目中必备文件之一，因此如何创建package.json文件内容就非常的重要，那么这里，向大家显示一个最简单的package.json文件模板：

{    "name":"项目名称",    "version":"项目版本号",    "description":"项目描述",    "author":"项目创建者",    "license":"项目版权",    "devDependencies": {        //项目依赖插件    }}

我们来看看一个测试项目的package.json文件中的真正内容：

{  "name": "testGrunt",

  "version": "0.1.0",

  "description": "this is test project with grunt.",

  "author": "airen",

  "license": "BSD",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-jshint": "~0.10.0",    "grunt-contrib-nodeunit": "~0.4.1",    "grunt-contrib-uglify": "~0.5.0"  }}

创建Gruntfile.js文件

package.json文件搞定之后，就可以在项目根目下创建Gruntfile.js文件，这个时候你可以使用grunt-init或者直接手工创建一个。我们先来看一个Gruntfile.js的文件模板：

我们来看一个简单的示例：

到此，Grunt项目所需的package.json和Gruntfile.js文件都算是创建完成。有了这两个文件之后，Grunt项目算是万事具备，只欠东风了。你只需要在你的Grunt项目下运行：

$ npm install

执行完后，你将会在你的命令终端看到一大串类似于下面的一些信息：

这个时候表示你的Grunt项目创建完成。你的项目结构也将变化成：

|--testGrunt

|----Gruntfile.js

|----node_modules

|--------grunt

|--------grunt-contrib-uglify

|----package.json

|--testGrunt

|----Gruntfile.js

|----node_modules

|--------grunt

|--------grunt-contrib-uglify

|----package.json

运行Grunt

$ grunt

执行完后，你将会在你的命令终端看到一大串类似于下面的一些信息：

Running "copy:main" (copy) task
Created 210 directories, copied 1627 files

Running "uglify:build" (uglify) task
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: .././public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/*.js completed.
File: ../../public/js/index.js completed.

···Done, without errors.

表示Grunt执行的任务都成功了。