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