如何使用 Grunt 和 Gulp 实现工作流程自动化

当你刚接触前端开发，并开始掌握 HTML5、CSS 和 JavaScript 时，很自然的下一步就是上手那些让大多数开发者能够在这个复杂领域保持理智的工具。你也应该拥有更多的灵活性和功能，在编写 CSS 文件时少写一些。你也应该通过缩小 JS 代码来优化带宽。你也应该能够自动检查你的 JS 代码是否良好，可以使用 JSHint。

你值得拥有所有这些好东西。

所以你开始手动使用所有这些强大的工具；手动运行越来越多的命令行。有时，你忘了运行 less 编译器……有时你忘了运行 JSHint，结果导致一个 bug 被发布……

突然之间，你发现自己想知道：有没有办法自动化所有这些工具？如何创建一个可重复的工作流来防止你犯错？

显然，解决方案是存在的，其中有两个工具尤其适合你开始使用：Grunt 和 Gulp。

作为一个新手使用这些工具，你一定在想它们是如何工作的，以及该使用哪一个，对吧？那么太好了，你正在阅读正确的文章！

我们将使用的示例

我将通过一个非常简单的示例，让你了解使用 Grunt 和 Gulp 的基础知识，你可以从这里下载：http://aka.ms/gruntgulpplugin

这是一个简单的网站，由三个文件组成

Styles.less 以比标准 CSS 文件更丰富的方式定义了 CSS。最终我们使用 Less 编译器创建一个 styles.css 文件。例如，使用 Less，我们可以在 CSS 文件中使用变量。

在此了解有关 Less 的更多信息：http://lesscss.org/

JavaScript 和 HTML 代码非常简单。页面应该看起来像这样

理解 Nodejs 包管理器

首先，你需要理解 NodeJS 包管理器 (npm) 是如何工作的。

Npm 是 Node.JS 提供的工具。它用于获取工具和框架，同时自动解决它们的依赖关系。

例如，要使用 less 并将其编译为可供 Web 使用的 CSS 文件，首先需要使用此命令安装 less：

npm install -g less

注意：要获取 npm 命令行，您必须从 https://node.org.cn/ 安装 nodejs

完成此操作后，您可以运行此命令将 .less 文件编译为 .css

lessc styles.less > styles.css

Npm 使用一个文件，该文件在它正在工作的本地文件夹中创建和存储：package.json。此文件使用 JavaScript 对象表示法 (JSON) 格式，让 npm 知道已安装的工具和版本，以及当前项目（由当前文件夹表示）使用的框架。

此文件对于 Grunt 和 Gulp 很重要，因为它将包含已下载并在自动化工作流中可用的插件列表。

要创建一个空的 package.json 文件，您可以使用以下 npm 命令：

npm init

您将需要回答一些问题，您可以使用默认选项来回答，然后您就可以开始。

在此文件中，您将有两种类型的依赖项：

• 执行您的 Web 应用/Nodejs 应用所需的依赖项
• 开发阶段所需的依赖项（如 Less），用于编译/检查您的代码

Npm 主要提供三种安装包的方式：

• 使用 –g 或 -global 选项全局安装在您的机器上
• 为了执行目的，使用无选项在本地项目文件夹中安装（仅 npm install [tools or framework]）
• 为了开发目的，使用 --save-dev 选项在本地项目文件夹中安装

第三种方式将在 package.json 文件中创建一个 devDependencies 部分/属性。

Grunt

什么是 Grunt？

Grunt 是 JavaScript 自动化工作流领域的先驱。有很多知名的 Grunt 用户，如 Twitter、jQuery 和 Modernizr。

Grunt 的基本原理是为我们提供一种简单的方法来运行任务。任务是一组已为您创建的代码文件和配置文件。您可以通过安装 Grunt 插件来获取新任务，您可以通过 npm 获取这些插件。几乎所有您可能使用的工具都可以找到相应的插件，例如Less 和JSHint。

要运行 Grunt，您必须创建一个 Gruntfile，在其中指定要运行的任务以及每个任务的配置。完成此操作后，您只需运行 grunt 命令行，指定您要运行的任务（默认任务或特定任务），它将自动执行。

现在，让我们一步一步地了解如何进行设置。

步骤 1. 创建 package.json 文件

使用 npm 初始化文件

npm init

您将需要回答一些问题，例如项目名称以及默认的 .js 文件。您也可以选择手动创建文件并设置其内容为

{
  "name": "project-name",
  "devDependencies": {},
  "dependencies": {}
}

步骤 2. 全局和本地安装 Grunt

您需要全局安装 Grunt 以获取命令行，并本地安装以初始化项目所需的一切。

Run

npm install -g grunt

然后本地运行

npm install grunt --save-dev

注意：不要忘记 –dev 部分，以便在 package.json 文件中将其指定为 devDependencie。

步骤 3. 创建 gruntFile.js

Grunt 使用一个名为 gruntFile.js 的文件。此文件包含 Grunt 所需的一切，即：

• 任务配置
• 自定义任务
• 任务加载

Grunt 期望该文件导出一个函数，该函数接受一个名为“grunt”的参数。您将使用此对象执行所有 Grunt 相关的操作。

这是一个最小的 gruntfile，它只读取 package.json 文件并创建一个默认任务，该任务不执行任何操作。

注意：将文件放在项目文件夹中，与 package.json 文件并排。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
  });

  // Default task(s).
  grunt.registerTask('default', []);

};

您可以执行它以确保所有配置都正确。为此，请在项目文件夹中打开命令提示符并运行：

grunt

您应该会看到类似这样的内容

步骤 4. 添加您的第一个任务：JSHint

现在您的 Gruntfile 已准备就绪，下一步是添加一个插件并使用它。所有插件都可以在此处找到：https://grunt.node.org.cn/plugins。Gruntfile 中执行的常见任务之一是检查 JavaScript 语法是否正确。为此，我们通常使用 JSHint。

将其添加到您的 Grunt 工作流中。

如果您在 grunt 插件页面上搜索 JShint，您会找到 grunt-contrib-jshint（https://npmjs.net.cn/package/grunt-contrib-jshint），这正是我们需要的！

在项目文件夹中，运行：

npm install grunt-contrib-jshint --save-dev

完成后，您必须将其添加到您的 Gruntfile.js 中。为此有两个简单的步骤：

• 加载插件
• 配置任务

要加载插件，请使用 loadNpmTasks 函数。

// Load the plugin that provides the "jshint" task
grunt.loadNpmTasks('grunt-contrib-jshint');

配置在 initConfig 函数中完成，您必须在传递给该函数的对象中添加一个新属性。该属性必须是要添加的任务名称，并且与您使用的插件相关。了解该名称和任务可用选项列表的最佳方法是查看插件文档。您总会找到一个文档完善的示例。

例如，在我们的示例中，我们想检查所有 JavaScript 文件，但排除 gruntfile.js。我们还想启用一组规则来检查 JavaScript 文件，例如 ‘eqeqeq’，以确保在需要时使用三等号。

这是修改后的 initConfig 函数：

您可以通过使用以下命令行来运行您的任务（其中您将任务名称指定为 grunt 的参数）：

grunt jshint

结果如下：

您只需要运行该命令，它就会自动提示您发现的任何错误。

恭喜您，您现在在 Grunt 工作流中拥有了一个自动化的任务！

步骤 5. 添加第二个任务：Less 编译

您的 JShint 任务运行良好，但在工作流中有点孤单。通常，我们使用 Grunt 等工具运行多个任务。

添加更多任务非常容易，因为您只需要遵循相同的步骤。假设您现在想在自动化过程中添加对 less 文件的编译。如果您在 grunt 插件中搜索，您会找到一个 grunt-contrib-less 插件，您可以在项目文件夹中安装它：

npm install grunt-contrib-less --save-dev

与 jshint 任务一样，您必须添加配置：

然后，加载任务：

您现在可以运行 Grunt 并指定 less 任务：这将只启动 less。这没问题，但您想运行所有任务，对吧？这就是 default 任务的作用。

当您只运行 grunt 而不指定任何任务时，它会查找 default 任务并运行其数组中指定的所有任务。您可以修改它以运行 less 和 jshint。 请注意，要添加像 default 这样的任务组，您需要调用 registerTask 函数。

从现在开始，当您运行：

grunt

它将运行 jshint，然后运行 less。

您可以添加任何您想要的任务，您也可以指定其他任务组，如 default，并通过将它们的名称作为参数传递给 grunt 命令行来调用它们。

很简单，对吧？

步骤 6. 使用 watch，这样您就不必手动运行 grunt

现在，您是一名快乐的开发者。您所有重复性的任务都已自动化到 grunt 工作流中，您只需运行 grunt 即可执行它们。但这可以做得更轻松。它可以自动完成。

为此，您可以添加一个名为 watch 的特定任务。此任务将持续监视您的工作文件夹，并根据规则，当文件被修改时，grunt 将运行一个关联的任务。

首先，在您的项目文件夹中安装 watch：

npm install grunt-contrib-watch --save-dev

像所有其他任务一样使用 loadNpmTasks 函数加载它并进行配置。配置部分在这里有点不同，因为您需要为要通过 watch 覆盖的每个任务指定一个配置。

您可以在此处找到此任务的完整文档：https://npmjs.net.cn/package/grunt-contrib-watch

当您想激活 watch 时，只需运行以下命令：

grunt watch

每次文件更改并且该文件在特定任务的监视文件范围内时，它都会执行任务。

就是这样！您现在已经了解了使用 Grunt 创建自动化工作流所需的一切。

Gulp

什么是 Gulp？

Gulp 是 Grunt 的替代品。它出现得稍晚一些，并且以比 Grunt 更灵活而闻名。在选择使用哪个之前，让我们看看 Gulp 是如何工作的。

Gulp（https://gulp.node.org.cn/）是一个工作流自动化工具。与 Grunt 一样，它使用 npm 和 package.json 文件。所有可用的插件也将使用 npm 下载，并作为 devDependencies 添加到 package.json 文件中。

Gulp 的主要区别之一是它使用流。流是一组函数，文件将通过这些函数并在内存中进行修改。文件将在处理结束时才写入磁盘，因此效率更高。另一方面，Grunt 任务像孤岛一样工作，无法链接。

让我们通过几个简单的步骤快速了解 Gulp 的工作方式。

步骤 1. 创建 package.json 文件

与 Grunt 类似，您首先需要创建 package.json 文件。您可以使用与 Grunt 示例中相同的技术。

步骤 2. 全局和本地安装 Gulp 和 gulp-util

创建 package.json 文件后，使用以下命令全局和本地安装 gulp：

npm install -g gulp

和

npm install gulp --save-dev

这将安装 gulp 命令行和运行 gulp 工作流所需的一切。

然后您需要安装 gulp utils，它包含其他插件共享的常用函数：

npm install gulp-util --save-dev

最后，创建一个最小的 gulp 文件，它看起来像这样：

如您所见，它与 Grunt 的语法略有不同。在 gulp 中，插件的加载方式与您可能习惯的 require 语法相同，如果您是 nodeJS 开发者的话。还有一个使用 gulp.task 函数定义的default 任务。

如果您在项目文件夹中使用命令行运行 gulp，您应该会看到如下结果：

步骤 3. 使用您的第一个任务：Less 编译

要在 gulp 中使用插件，您可以使用与创建default 任务时使用的相同函数。这是因为您不必使用特定名称来创建任务。您只需调用 gulp.task，设置您想要的名称，并将其作为第二个参数提供一个 JavaScript 函数。当 gulp 运行任务时，它将运行此函数。

要使用插件，您需要调用它，使用您在require 时选择的名称。通常，您会将其作为流式工作流的一部分来调用，该工作流通常以文件选择开始。这通过 gulp.src 函数完成。它将选择一组文件并返回一个流，该流可被使用 pipe 的另一个函数使用。这就是您可以链接多个操作而无需将它们写入磁盘的方式。您只需将流从一个插件传递到另一个插件。

这是一个简单的 Less 示例：

我们首先 require (‘gulp-less’) 来加载 gulp 的 less 插件。（我们通过 npm install gulp-less --save-dev 获取它）。

然后 gulp.src 将选择所有 .less 文件，我们将其‘pipe’到 less() 函数，最后将其‘pipe’到 gulp.dest ，它指示在哪里写入结果。由于 gulp.src 可以选择多个文件，gulp.dest 指定一个文件夹。

一旦您理解了管道模型，您就可以轻松获得与 Grunt 获得的结果相同的效果。

Gulp 的强大之处在于您可以创建自定义任务，在其中调用一个以上的插件，并可以根据需要将它们关联起来。

注意：显然还有一个 gulp-watch 插件，您可以使用它来自动化工作流的启动！

结论：选择哪个？

我希望您现在对为什么需要自动化工作流以及如何使用 grunt 或 gulp 来实现它有了更清晰的理解。

选择其中一个更多地取决于您要完成的任务。

Grunt 易于使用。您不必理解管道系统，并且完成简单任务将更加直接。它是一个非常成熟的工具，被许多知名的编辑器和开发人员使用，并且有大量的插件可用。

话虽如此，Gulp 的设计方式可以为您提供很大的灵活性。它已经存在相当长一段时间了，即使您找不到像 Grunt 那样多的插件，所有经典的插件都可用于 Gulp。

如果您使用非常标准的工作流，包含 jshint、uglifying、css validating 等常见步骤，Grunt 是一个不错的选择。如果您要处理更复杂的任务，Gulp 将是您的好帮手。

更多信息

• Grunt 网站：https://grunt.node.org.cn/
• Gulp 网站：https://gulp.node.org.cn
• 在 Microsoft Visual Studio 中使用 Grunt：http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-bower-in-visual-studio-2015

更多关于 JavaScript 的实践

Microsoft 在许多开源 JavaScript 主题上有大量的免费学习资源，我们的使命是通过Microsoft Edge 创造更多资源。以下是一些可以查看的：

• Microsoft Edge Web Summit 2015（关于新浏览器、新 Web 平台功能以及社区嘉宾的完整系列）
• Build of //BUILD/ and Windows 10（包括适用于网站和应用程序的新 JavaScript 引擎）
• Advancing JavaScript without Breaking the Web（Christian Heilmann 的近期主题演讲）
• Hosted Web Apps and Web Platform Innovations（对 manifold.JS 等主题的深入探讨）
• Practical Performance Tips to Make your HTML/JavaScript Faster（一个 7 部分的系列，涵盖响应式设计、休闲游戏到性能优化）
• The Modern Web Platform JumpStart（HTML、CSS 和 JS 的基础知识）
• Hack Grunt to Make Your Website Awesome Rami Sayar 将向您展示如何快速构建 Gruntfile。

以及一些免费工具供您开始使用：Visual Studio Code、Azure 试用版，以及跨浏览器测试工具 – 所有这些都适用于 Mac、Linux 或 Windows。

本文是 Microsoft Web 开发技术系列的一部分。我们很高兴与您分享Microsoft Edge 和新的EdgeHTML 渲染引擎。在http://dev.modern.ie/ 获取免费虚拟机或在您的 Mac、iOS、Android 或 Windows 设备上远程测试。