Gulp 介绍与装置

Gulp 是前端开发过程中一种对代码进行构建的工具，是自动化我的项目的构建利器。它不仅能对网站资源进行优化，而且在开发过程中很多反复的工作可能应用正确的工具主动实现，应用 Gulp 不仅能够轻松的编写代码，而且还大大的进步了咱们的工作效率。

Gulp 是基于 Node.js 的自动化工作运行器，它能自动化地实现前端代码（例如 HTML、CSS、JavaScript、Less、Sass、image 等文件）的测试、查看、合并、压缩、格式化、浏览器主动刷新、部署文件生成，并监听文件在改变后反复指定的这些步骤。

Gulp 特点

• 易于应用，通过代码的优质配置策略，使得 gulp 操作简略工作简单化，简单工作治理化。
• 构建快捷，利用 Node.js 的作用咱们能够更疾速的构建我的项目从而缩小频繁的 IO 操作。
• 简略易学，用起码的 API 更轻松的把握 gulp。
• 插件高质，gulp 严格的插件指南能够确保咱们的工作更加高质无效。

如何装置 Gulp

在装置 Gulp 之前，咱们须要先查看电脑上是否曾经正确装置 node、npm、npx，须要用到的命令如下所示：

node --version
npm --version
npx --version

如下图所示：
如果上述工具还没有装置，能够先点击进行装置：https://nodejs.org/en/。

装置 Gulp 命令行工具

装置 Gulp 命令行工具命令如下所示，其中 --global 示意全局装置：

npm install --global gulp-cli

装置实现后，能够创立我的项目目录并进入创立好的目录：

> npx mkdirp my_gulp
> cd my_gulp

如下图所示：

这样咱们就在 C:\Users\lu\Desktop 目录下创立一个名为 my_gulp 的我的项目。

创立 package.json 文件

如果咱们要在我的项目的根目录下创立一个 package.json 文件，能够执行如下所示命令：

> npm init

按下回车后，此命令会指引咱们设置我的项目名、版本、形容信息等，如下图所示，如果想要疾速创立 package.json 文件，能够执行 npm init -y 命令。

装置 Gulp

而后在我的项目根目录下执行如下命令，装置 Gulp，作为开发时依赖项：

npm install --save-dev gulp

装置实现之后，能够执行如下命令查看是否装置胜利：

gulp --version

如下图所示：

此时我的项目根目录下会创立一个 package-lock.json 文件，并且 gulp 会被增加到 package.json 文件的 devDependencies 选项中。

创立 gulpfile 文件

咱们能够在根目录下创立一个名为 gulpfile.js 的文件，文件的内容如下所示：

function defaultTask(cb) {cb();
}
exports.default = defaultTask;

而后咱们就能够开始测试啦，在我的项目根目录下执行 gulp 命令：

> gulp

能够看到默认工作将执行，因为工作为空，因而没有理论动作：

如需运行多个工作，能够执行 gulp <task> <othertask>。