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

女爷i 2022-08-19 01:53 257阅读 0赞

## Grunt这么鬼，是干啥的呢？ ##

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

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

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

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

[Grunt][Link 1]是一个自动化的项目构建工具。如果你需要重复的执行像压缩，编译，单元测试，[代码][Link 2]检查以及打包发布的任务。那么你可以使用[Grunt][Link 1]来处理这些任务，你所需要做的只是配置好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 文件放到项目根目录，并对文件进行修改配置.

![Directory][]

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

#### 1. package.json 文件修改 [ 官方文件地址][Link 3] ####

![package.json][]

#### 2. Gruntfile.js 文件修改 [ 官方文件地址][Link 4] ####

![Gruntfile.js][]

# **如何开始使用Grunt** #

Grunt 和 Gruntplugins(grunt 插件) 都是通过npm（[https://npmjs.org/][https_npmjs.org]）来管理和安装，npm是一个node.js（[http://nodejs.org/][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][view plain] [copy][view plain]

1.  npm uninstall -g grunt

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

**\[plain\]** [ view plain][view plain] [copy][view plain]

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][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][http_gruntjs.com_project-scaffolding]) 模板会自动创建一个与此项目相关的 package.json 文件
 *  **npm init** 命令会自动创建一个基本的 package.json 文件
 *  用下面这个例子作为开始，然后在添加自己需要的配置，可以参考这里（[https://npmjs.org/doc/json.html][https_npmjs.org_doc_json.html]）

**\[javascript\]** [ view plain][view plain] [copy][view plain]

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][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团队很勤劳，社区活跃，有兴趣可以持续关注。

[  
  
][http_gruntjs.com]

[  
][http_gruntjs.com]

[http_gruntjs.com]: http://gruntjs.com
[Link 1]: http://caibaojian.com/t/grunt
[Link 2]: http://caibaojian.com/c/code
[Directory]: /images/20220731/80665eb727cf417b99de402fbd2490c7.png
[Link 3]: http://gruntjs.com/getting-started#package.json
[package.json]: /images/20220731/36edd886ab744773add10e0ef6892948.png
[Link 4]: http://gruntjs.com/getting-started#an-example-gruntfile
[Gruntfile.js]: /images/20220731/ac2be002e22b4ca6a409bc0a0253197d.png
[https_npmjs.org]: https://npmjs.org/
[http_nodejs.org]: http://nodejs.org/
[view plain]: http://blog.csdn.net/lihongxun945/article/details/8895208#
[https_github.com_gruntjs_grunt-cli_blob_master_bin_grunt]: https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt
[http_gruntjs.com_project-scaffolding]: http://gruntjs.com/project-scaffolding
[https_npmjs.org_doc_json.html]: https://npmjs.org/doc/json.html
[https_npmjs.org_doc_json.html_Tilde-Version-Ranges]: https://npmjs.org/doc/json.html#Tilde-Version-Ranges