使用 Gulp 进行 JavaScript 自动化简介

作为 Web 开发人员，我们有时会发现自己一次又一次地重复同样乏味的任务。 如果您考虑在浏览器上运行构建命令或点击刷新会浪费多少时间，您会意识到可以节省大量时间。 此外，通过自动化流程，您可以专注于手头的任务，而不是暂时离开“区域”（您的生产力状态）。

在这个 JavaScript 自动化教程中，您将学习如何使用 Gulp 自动化您的设计和开发过程。 如果您更注重设计，我鼓励您克服任何恐惧并继续阅读。 另一方面，如果你是一名开发人员，一旦你理解了它背后的逻辑，你就可以彻底了解它。

Gulp 是一个构建系统，它使用 Node.js 的流来实现异步源-目标自动化方法。 一切都是用 JavaScript 编写的，因此任何具有中级编码知识的人都可以轻松上手。 Gulp 构建过程由一组观察者和任务组成。 此外，Gulp 背后的社区在 npm 中维护了一个巨大的插件目录，它有助于完成从连接 JavaScript 到从 SVG 创建图标字体的任何任务。

Gulp 的替代品

那里有很多替代品，其中大部分是在过去几年中产生的——最引人注目的是 Grunt。 Gulp 和 Grunt 之间的比赛永远不会有明显的赢家，因为他们都有自己的优点和缺点，因此我将避免深入研究。 简而言之，Grunt 对配置的高度依赖是引导人们转向 Gulp 的 JavaScript 方法的原因。 与此同时，像 Koala 这样的原生 GUI 实现已经取得了一些进展，主要来自那些不愿进入编码的人。 但是，对于捆绑的应用程序，不可能达到 Gulp 提供的可定制性和可扩展性级别。

过程自动化基础

插件

插件是 gulp 完成每个过程的手段。 插件通过 npm 安装并使用“require”启动。

任务

对于 Gulp，任务总是有来源和目的地。 在它们之间存在调用每个插件并将转换结果输出到下一个管道的管道。

球体

Glob 是引用文件的通配符模式。 glob 或 glob 数组用作任务源中的输入。

观察者

观察者观察源文件的变化并在检测到变化时调用任务。

gulpfile.js

这是“gulp”命令指向的 JavaScript 文件。 它包含从任务到观察者或任务使用的其他代码的所有内容。

一项简单的任务

要开始使用，您需要 Node.js 和具有管理员访问权限的命令行 shell。 你可以从这里下载 Node.js。 安装后，您可以运行以下命令以确保 npm 是最新的。

 sudo npm install npm -g

-g 标志表明安装将是全局的。

现在您已准备好安装 Gulp 并开始调用一些简单的任务。 使用以下命令全局安装 Gulp。

 sudo npm install gulp -g

请注意，您也可以使用相同的命令进行更新。

您可以从 toptal-gulp-tutorial/step1 下载帮助您完成第一项任务的入门工具包。 它包括一个将 SCSS 文件编译为 CSS 的非常简单的任务。 它使用了 gulp-sass 插件，该插件使用了 libsass。 我在这里选择了 libsass，因为它比 Ruby 替代品快得多，尽管它缺少一些功能。 进入项目的根目录后，您可以使用以下命令安装所需的所有插件。

 npm install

此命令读取 package.json 文件并安装所需的所有依赖项。 我们在这里使用“npm install”作为以下内容的简写：

 npm install gulp --save-dev npm install gulp-sass --save-dev

“–save-dev”标志将选定的插件添加到 package.json devDependencies 中，以便下次您想要安装所有内容时，可以使用方便的“npm install”。

此时您可以运行您的第一个任务。 运行以下命令，观察 /scss 文件夹中的所有 SCSS 文件都编译成相应目录下的 CSS：

 gulp scss

请注意，在此示例中，我们指定要运行的任务。 如果我们省略了任务名称，则会运行名为“default”的任务。

代码演练

以上仅用 7 行 JavaScript 代码即可完成。 当然，一旦您掌握了它的简单性，您就会有宾至如归的感觉：

 var gulp = require('gulp'); var scss = require('gulp-sass');

在开始时，我们初始化我们将使用的所有插件。 Gulp 是我们唯一不能没有的：

 gulp.task('scss', function() {

我们定义名为“scss”的任务：

 return gulp.src('scss/*.scss')

设置任务的源文件。 这些被定义为 glob。 在此示例中，我们指的是“scss/”文件夹中以“.scss”结尾的所有文件。

 .pipe(scss())

此时，我们调用之前定义的 gulp-sass 插件：

 .pipe(gulp.dest('css'));

最后，我们使用“gulp.dest”来定义文件的目标文件夹。 如果文件连接在一起，这也可以是单个文件名。

为了进一步改进这个过程自动化的实现，你可以尝试包含一些其他的 Gulp 插件。 例如，您可能希望使用 gulp-minify-css 缩小任务的最终产品，并使用 gulp-autoprefixer 自动添加供应商前缀。

雇佣观察者

我创建了一个可以立即使用的观察者入门工具包。 您可以从 toptal-gulp-tutorial/step2 下载它。 它包括先前创建的 SCSS 任务的增强版本，以及监视源文件和调用任务的监视器。 为了启动它，请使用以下命令：

 gulp

此命令启动启动观察者的“默认”任务。 此时，您可以编辑任何 SCSS 文件并观察 CSS 文件是否被重新编译。 您将能够在命令行中看到 Gulp 的通知。

代码演练

我们已经为我们的任务设置了一个观察者，只用了 3 行额外的代码。 也就是说，观察者入门套件与介绍性示例没有太大区别。 在本节中，我们将介绍所有的添加和更改。

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

在这个例子中，Gulp 源提供了一个 glob 数组。 第一个包括所有以“.scss”结尾的文件也在子文件夹中，第二个不包括以“_”开头的文件。 这样我们就可以使用 SCSS 的内置函数 @import 来连接 _page.scss 文件。

 gulp.task('default', ['scss'], function() {

在这里，我们定义了“默认”任务。 “scss”任务在“default”之前作为依赖项运行。

 gulp.watch('scss/**/*.scss', ['scss']);

最后，我们调用 Gulp 的 watch 函数指向任何以“.scss”结尾的文件，并且每当发生更改事件时，运行“scss”任务。

现在您已准备好为其他自动化过程创建新的观察者，例如 JavaScript 连接、代码提示、CoffeeScript 编译或任何其他可能想到的东西。 为了更深入地研究这个 JavaScript 自动化实现，我建议添加 gulp-notify，它会在任务运行时通知你。 此外，您可以创建一个单独的任务来缩小生成的 CSS 代码并使“scss”任务作为其依赖项运行。 最后，您可以使用 gulp-rename 将“.min”后缀添加到生成的文件中。

用于 JavaScript 自动化的高级 Gulp 插件

Gulp 的插件库中有数千个插件，其中一些远远超出了构建过程的简单 JavaScript 自动化。 以下是一些杰出的例子：

浏览器同步

BrowserSync 注入 CSS、JavaScript 并在进行更改时自动刷新浏览器。 此外，它还包含一个 ghostMode 功能，可用于吓唬您的同事或大大加快您的浏览器测试速度。

浏览器化

Browserify 分析应用程序中的“require”调用并将其转换为捆绑的 JavaScript 文件。 此外，还有一个可以转换为浏览器代码的 npm 包列表。

网页包

与 Browserify 类似，Webpack 旨在将具有依赖关系的模块转换为静态文件。 这为用户提供了更多关于如何设置模块依赖项的自由，并且不旨在遵循 Node.js 的代码风格。

业力

Gulp-karma 为 Gulp 带来了臭名昭著的测试环境。 Karma 遵循 Gulp 支持的最少配置方法。

结论

在这个流程自动化教程中，我展示了使用 Gulp 作为构建工具的美感和简单性。 按照本教程中描述的步骤，您现在可以在未来和遗留项目中完全自动化您的软件开发过程。 花一些时间为您的旧项目设置构建系统肯定会在未来为您节省宝贵的时间。

请继续关注即将推出的更高级的 Gulp 教程。