《JavaScript开发框架权威指南》——2.2　Grunt是如何工作的

本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章，第2.2节，作者：【美】Tim Ambler , Nicholas Cloud著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.2 Grunt是如何工作的

Grunt为开发者提供了一个工具包，用于创建命令行程序来执行项目构建过程中的重复性任务，如压缩JavaScript代码、编译Sass样式表等。不过，Grunt的能力并不限于创建简单的任务（通常这些任务不会被分享或者复用），以解决特定工程遇到的特定需求，其真正的力量源于其将任务打包为可复用的插件的能力。这些插件可以被发布、分享、使用以及由其他人进行改进。本书写作之时已经有超过4 400个这样的插件。

Grunt的运转依赖于四个核心组件，接下来逐一论述。

2.2.1 Gruntfile.js
在Grunt中处于核心地位的是Gruntfile——一个位于工程根目录下的名为Gruntfile.js（见清单）的Node模块。正是这个文件使得我们可以加载Grunt插件，创建自定义任务，并根据项目需求对它们进行配置。Grunt每次运行时的首要任务都是接受该模块发出的指令。

清单2-2 Gruntfile示例

// example-starter/Gruntfile.js

module.exports = function(grunt) {

 * 配置即将用到的任务和插件

 grunt.initConfig({

 /* Grunt的file API为开发者提供了与文件系统进行交互所必需的抽象。稍后，我们将在

 本章对此进行深入了解。*/

 pkg: grunt.file.readJSON(package.json),

 uglify: {

 development: {

 files: {

 build/app.min.js: [src/app.js, src/lib.js]

 * Grunt插件以Node包的形式存在，并由npm发布。这里，我们加载的是grunt-contrib-uglify插件。

 * 该插件包含的任务可以对项目源代码进行合并与压缩，以备发布之用。

 grunt.loadNpmTasks(grunt-contrib-uglify);

 * 这里，我们创建了一个名为default的任务，其仅有的功能就是调用uglify任务。换句话说，该任务

 * 实际上是uglify任务的别名。名为default的任务指明了在命令行中不带参数调用Grunt时应当执

 * 行的动作。在本例中，我们的default任务仅仅调用了一个单独的任务。不过（依次）调用多个任务

 * 其实同样简单，只要在传入的数组中添加多个条目即可。

 grunt.registerTask(default, [uglify]);

 * 这里，我们创建了一个自定义任务，利用Grunt内置的用户反馈（user feedback）方法，向控制台

 * 输出一条消息（后面还有一个换行符）。稍后，我们将在本章对此做深入了解。

 grunt.registerTask(hello-world, function() {

 grunt.log.writeln(Hello, world.);

};

2.2.2 任务（Tasks）
作为Grunt的基本构建模块，任务实际上只是由Grunt的registerTask()方法注册的具名函数。清单所示的hello-world任务将向控制台输出一条消息。在命令行中调用该任务的结果，如清单所示。

清单2-3 运行清单中所示的hello-world任务

$ grunt hello-world

Running "hello-world" task

Hello, world.

Done, without errors.

如清单所示，多个Grunt任务也可以由单条命令调用执行。每个任务都将按照参数的传入顺序依次执行。

清单2-4 顺序运行多个任务

$ grunt hello-world uglify

Running "hello-world" task

Hello, world.

Running "uglify:development" (uglify) task

 1 file created.

Done, without errors.

我们刚看到的hello-world任务是简单独立型Grunt任务的代表。这样的任务可以用于实现一些简单的功能，以解决特定项目的需求。通常我们不会考虑其复用或者分享的问题。但是多数时候，你会发现我们实际用到的都不是这样的独立型任务，而是那些已经打包为Grunt插件并发布到npm的任务。以插件的形式发布更便于别人使用或者参与改进。

2.2.3 插件（Plugins）
Grunt插件是一系列能够用于不同项目的可配置任务（以npm包的形式发布）的集合。现存的Grunt插件数以千计，可谓洋洋大观。清单中的Grunt方法loadNpmTasks()用以加载名为grunt-contrib-uglify的Node模块。该模块可以将工程中的JavaScript代码合并为单个压缩（minified）文件，以适应发布需求。

2.2.4 配置
Grunt以强调“配置优先”（configuration over code）而著称：任务和插件的功能均可通过配置文件进行定制，以适应不同工程的需求。正是这种代码与配置分离的特性，使开发者能够创造出容易被复用的插件。本章稍后将介绍配置Grunt插件和任务的各种不同的方法。

《JavaScript开发框架权威指南》——2.6 创建Grunt插件 首先要做的事情之一是情创建一个公共的GitHub仓库，以存储你的新插件。下文中将要提及的示例包含在本书附带的源码中，本书附带了源码。一旦你准备好代码仓库，就把它克隆到你的电脑上。
《JavaScript开发框架权威指南》——2.3 将Grunt添加到项目中 loadTask()方法一被调用，Grunt就会加载并执行在该文件夹下发现的所有Node模块，并且每次都将Grunt对象的引用作为参数传进去。这样的行为使我们可以将项目的Grunt配置划分为一系列相互独立的模块，每个模块负责一个单独的任务或插件的加载及配置工作。
《JavaScript开发框架权威指南》——第2章 Grunt 2.1安装Grunt 懒惰的程序员讨厌重复自己。他们通常会花费大量的时间去创造有用的工具，代替自己完成重复性的工作。他们往往还会为这些工具编写详尽的文档，以免之后可能因此而遇到麻烦。
《JavaScript开发框架权威指南》——2.7 小结 本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章，第2.7节，作者：【美】Tim Ambler , Nicholas Cloud著，更多章节内容可以访问云栖社区“异步社区”公众号查看
《JavaScript开发框架权威指南》——2.5 操作文件系统 如清单所示，Grunt的多任务配置和刚才介绍的很相似。关键不同之处在于任务配置中的src属性。在我们的任务中，Grunt提供了一个this.files属性，该属性提供了一个包含着匹配到每个文件路径的数组，这些文件通过node-glob模块取得匹配到的文件路径数组。任务输出的结果可以在清单中看到。
《JavaScript开发框架权威指南》——2.4 处理任务 今后你遇到的绝大多数Grunt插件都会是可配置的多任务。由此而来的灵活性使得我们可以针对不同的应用环境，以不同的方式运行同一个任务。一个常见的情景就是为不同的构建环境创建不同的输出目标。例如，在编译程序时，针对本地开发环境和产品发布可以选用不同的任务运行配置。
《JavaScript开发框架权威指南》——1.8 小结 Bower是一个简单的命令行工具，可以用来简化前端资源管理过程中的一些冗杂的工作。与其他平台上的知名包管理工具（如npm）不同，Bower的设计初衷并不是解决某种平台或者语言的特定需求；相反，它支持的是一般意义上的包管理。
《JavaScript开发框架权威指南》——1.7 创建Bower包 截至目前，我们关注的焦点都在如何将Bower集成到项目中。我们先在项目中对Bower进行了初始化，然后探究了查找、添加以及移除软件包的方法。但是总有那么一天，你会希望将自己的软件包分享给其他人。要这么做的话，就必须遵守一些简单的规则，让我们从选择有效的包名开始。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。