Gulp 介绍与安装

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>。