网站的运营与维护百家号关键词排名

本篇文章的核心是介绍一款强大的任务流工具 Gulp，之所以题目叫做 “前端自动化构建之 Gulp”，是因为 Gulp 本身是使用 JS 编写的运行在 Node 环境的一个 npm 包，并且大部分开发者也都使用它来作为前端项目的自动化构建工具。不过，从本质上说，Gulp 并非只能做前端自动化构建，后端构建发布自动化，脚本工具集自动化，测试流程自动化等都可以使用 Gulp。所以，无论你是哪个技术栈的开发者，学习使用 Gulp 都会对你大有裨益。

这边文章能够带给你：

• Gulp 工具的安装

• Gulp 工作原理

• 创建自动化流程中的独立任务

• 任务的串行与并行

• 使用管道处理数据流

• 监听文件变更

• 简易前端自动化构建 DEMO 流程

本篇文章虽然无法将 Gulp 所有的细节都介绍到，但总体上来说挑选了其中最核心的部分，也是最实用的部分进行了介绍，并且通过一个前端 DEMO 的示例，演示使用 Gulp 进行 [环境初始化 -> 代码合并 -> 代码压缩 -> 启动服务器 -> 监听文件 -> 热更新浏览器] 的完整自动化流程。

一、Gulp 基础

好像任何技术栈的开发者，都会遇到耗费时间且让人痛苦不堪的流程问题。除了基础的研发，测试，部署流程外，往往中间还需要根据需求执行额外的任务，例如代码检查，代码压缩，代码混淆等。这些流程虽然与研发无关，但是却是产品上线的必备过程，繁琐的流程不仅会消耗开发者额外的精力，对于团队来说，也很难控制所有开发者所执行的流程都一致且完整，例如某些成员可能由于疏忽大意而忘记做代码压缩就直接将项目发布上线了。因此，将流程自动化不仅可以解放人力，更是项目稳定性的保障。Gulp 就是为解决这样问题而发现的一款简单，高效且生态完整的自动化工具。

1. 安装 Gulp

Gulp 是运行在 Node 环境中的，因此你需要先安装 Node.js，这里不再赘述。

Gulp 工具分两部分构成，全局 Gulp CLI 和本地 Gulp。关于他们之间的关系，后面我们再详细介绍。首先先来安装全局的 Gulp CLI 工具，在终端执行如下指令：

sudo npm install -g gulp-cli

安装完成后，要检查是否安装成功，可以键入如下指令：

gulp -v

此时，你应该可以看到如下的输出：

CLI version: 2.3.0Local version: Unknown

其中，第一行表示我们安装的全局的 Gulp CLI 工具的版本号，第二行表示本地 Gulp 版本号，本地 Gulp 是安装在具体的项目目录中的，此时我们尚未安装。下面我们可以创建一个项目目录，例如创建名为 gulp-demo 文件夹，在目录下使用下面的指令来初始化 Node 模块：

npm init

在当前目录下使用如下指令来安装本地 Gulp：

npm install --save-dev gulp

安装完成后，再次执行 gulp -v，可以看到本地 Gulp 的版本，如下：

CLI version: 2.3.0Local version: 4.0.2

需要注意，你在测试时，要使用 4.x 及以上的本地 Gulp 版本。

2.Gulp 的工作原理

前面，我们安装了 Gulp CLI 和本地 Gulp，现在是时候来介绍下 Gulp 的工作原理了。在使用 Gulp 时，我们需要编写一个名为 Gulpfile.js 的文件，这个文件是 Gulp 工作的核心，其中会定义各种任务及任务流。Gulp CLI 工具是启动 Gulp 的入口，其通过指令来调用项目中的本地 Gulp，本地 Gulp 会调用 Gulpfile.js 文件，加载和执行定义好的任务，在 Gulpfile.js 文件中，通常又需要调用本地 Gulp 模块中提供的 API 方法，以及本地 Gulp 插件或自定义函数的功能从而实现任务。工作原理如下图所示：