前端开发入门:前端开发环境构建工具Grunt

Grunt这么鬼，是干啥的呢？

最近很火的前端自动化小工具，基于任务的命令行构建工具。官网http://gruntjs.com

中文网http://www.gruntjs.net/  通过官网和中文网，我们清楚了Grunt 是一个基于任务的JavaScript工程命令行构建工具。

jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！

我们知道grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件；② 合并文件；③ 简单语法检查。

Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩，编译，单元测试，代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务，你所需要做的只是配置好Grunt，这样能很大程度的简化你的工作。

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

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

简单点来说，Grunt不仅仅是构建工具，实际上他只是任务运行器，管理每个子任务的自动化运行，我们还能使用他做更多东西。

为什么要用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任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

Grunt帮我们干啥？

在开始介绍前，先向大家描述下面的场景:

【场景1：项目开始前】

1. 先建立一个 projA 的文件夹 再建 html css js images （建5个或以上文件夹，花费1分钟）
2. 拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
3. 再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… （建N个文件，花费N分钟）

【场景2：编码中】

编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

键盘就这样杯具了….

【场景3：编码完成】

1. HTML去掉注析、换行符 - HtmlMin
2. CSS文件压缩合并 – CssMinify
3. JS代码风格检查 – JsHint
4. JS代码压缩 – Uglyfy
5. image压缩 - imagemin

 

在一个项目过程中，重复而枯燥的工作太多了…. 绳命就这样浪费了。

我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Grunt应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool…

 

Grunt安装配置

安装 grunt-cli

1. 1. 自备node环境(>0.8.0), npm包管理
2. 2. 卸载旧版本grunt（<0.4.0） (没装过请忽略)

   npm uninstall grunt -g

3. 安装grunt-cli

   npm install grunt-cli -g

 

安装 grunt-init(可选)

npm install grunt-init -g

可选安装，grunt-init是个脚手架工具，它可以帮你完成项目的自动化创建，包括项目的目录结构，每个目录里的文件等。具体情况要看你运行grunt-init指定的模板，以及创建过程中你对问题的回答。由于篇幅且配置 grunt-init 模板较为复杂，本章暂不展开讨论，有兴趣的童鞋可私下了解。

 

配置 grunt

从官网下载package.json Gruntfile.js 文件放到项目根目录，并对文件进行修改配置.

• package.json //项目自动化所依赖的相关插件。
• Gruntfile.js //项目自动化工作流配置文件，重要

 

1. package.json 文件修改 官方文件地址

2. Gruntfile.js 文件修改 官方文件地址

如何开始使用Grunt

Grunt 和 Gruntplugins(grunt 插件) 都是通过npm（https://npmjs.org/）来管理和安装，npm是一个node.js（http://nodejs.org/）的包管理工具。

本教程是为 Grunt 0.4.x 版本编写的，但是也适用于 0.3.x版本。唯一要注意的是，对于 Grunt 0.3.x 版本，插件名和任务的配置选项可能和本教程中的描述有出入。

Grunt 0.4.x 需要安装 node.js ，并且版本 >= 0.8.0。

1.1 安装 Grunt

如果你在之前安装过全局的 Grunt，那么先删除它。

[plain] view plain copy

1. npm uninstall -g grunt  

在开始使用 Grunt 之前，你必须先安装一个全局的Grunt命令行接口（CLI）。如果是在OSX、BSD等*nix机器上，你可能需要sudo来运行；如果是在windows上，可能需要管理员权限。

[plain] view plain copy

1. npm install -g grunt-cli  

上面这条命令会把 grunt 加入你的系统搜索路径中，所以在任何目录下都可以使用此命令。

需要注意的是，安装 grunt-cli 并不是安装了grunt任务运行器！grunt-cli的任务非常简单：就是运行安装在GruntFile 同目录下的grunt（这里说的grunt是指通过npm安装的一个nodejs包，译者注）。

这样可以允许在同一台机器上运行多个grunt实例。

1.2 CLI 是如何工作的

每当 grunt 命令被执行时，它会通过nodejs的 require 命令在本地寻找已经安装的grunt。正因为如此，你可以在任何子目录下运行grunt 命令。

如果 cli 找到了一个本地安装的grunt，它会加载这个 grunt 库，然后应用你在 GruntFile 中写好的配置， 然后执行相应的任务。

具体是怎么工作的，可读这段代码 https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt

1.3 如何使用一个已经配置好的 grunt 项目

假设 Grunt CLI 已经安装好了，并且项目通过 package.json 和GruntFile这两个文件已经正确配置好了。那么非常简单就可以使用 grunt：

1. 进到项目的根目录。
2. 运行 npm install 来安装需要的软件包。
3. 运行 grunt 命令

这就是你需要做的全部事情。

运行 grunt --help 命令可以列出全部的grunt任务，但是最好还是先看下项目文档。

1.4 创建一个新的 grunt 项目

一个典型的安装过程只需要增加两个文件： package.json 和 GruntFile。

package.json: 这个文件是npm用来储存发布这个项目所需要的元数据。你需要把 grunt 和相关的 grunt插件都列在这个文件中。

GruntFile：这个文件命名是 GruntFile.js 或者 GruntFile.coffee, 是用来配置或者定义grunt任务并且加载grunt插件用的。

在0.3.x的版本中这个文件命名是 grunt.js。

1.5 package.json 文件

package.json 文件和 GruntFile 文件一样都位于项目的根目录下，都应该加入你的版本控制中。在 package.json 文件所在目录下运行npm install命令可以自动安装此文件中所列出的所有依赖包的正确版本。

有以下几种方式可以创建一个 package.json 文件：

• 大部分的 grunt-init (http://gruntjs.com/project-scaffolding) 模板会自动创建一个与此项目相关的 package.json 文件
• npm init 命令会自动创建一个基本的 package.json 文件
• 用下面这个例子作为开始，然后在添加自己需要的配置，可以参考这里（https://npmjs.org/doc/json.html）

[javascript] view plain copy

1. {  
2.   "name": "my-project-name",  
3.   "version": "0.1.0",  
4.   "devDependencies": {  
5.     "grunt": "~0.4.1",  
6.     "grunt-contrib-jshint": "~0.1.1",  
7.     "grunt-contrib-nodeunit": "~0.1.2"  
8.   }  
9. }  

1.6 安装 Grunt 和 grunt插件

把grunt和grunt插件加入一个已经存在的package.json 文件最简单的方式就是使用 npm install <module> --save-dev命令。这个命令不仅会在本地安装 <module>，而且会使用tilde version range（https://npmjs.org/doc/json.html#Tilde-Version-Ranges）自动把它加入到依赖关系中。

比如下面这个例子，会安装最新版本的grunt到你的项目下，并且会把它加到依赖关系中。

npm install grunt --save-dev

安装grunt插件和其他的nodejs插件都可以使用同样的方法。注意把更新后的 package.json 文件也提交到你的项目中。

1.7 GruntFile 文件

GruntFile.js 或者 GruntFile.coffee 都是合法的文件，它们需要和 package.json 文件一样被存储在项目根目录下并且提交到你的项目代码中。

在 grunt 0.3.x 版本中，这个文件命名是 grunt.js.

GruntFile 文件由如下几部分组成：

• wrapper function（包装函数）
• 项目和任务配置
• 加载grunt插件和任务
• 定制任务

Grunt使用总结

1. 1. 配置简单，配置文件Gruntfile.js是JS格式，比较贴近前端知识点。相对Ant之类基于JAVA,又是xml配置，相对来说学习成本低。
2. 2. Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。
   比如：haml less coffeeScript dataURI html2json
3. 3. 每个人的具体需求不一样，可以按自己的习惯合理配置，组合成最适合自己的自动化工作流。
4. 4. Grunt团队很勤劳，社区活跃，有兴趣可以持续关注。