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