Gulp.js 教程
写在前面
如果你对Nodejs比较了解，那么会更容易学习，如果你不了解Nodejs也不要紧，这里所介绍的Nodejs知识，非常简单，一看就会，都是基础语法，如果想学习Nodejs，可以查看本站的 Node.js 教程
视频教程
我为这个Gulp.js做了一套对应的视频教程，可以在我的Bilibili频道上看到: https://www.bilibili.com/video/BV1HA411i73M
具体的目录如下：
- Gulp 教程
- Gulp 安装
- Gulp 入门例子
- Gulp 原理
- Gulp 文件匹配规则
- Gulp 中途添加文件
- Gulp 分阶段输出
- Gulp 公开任务和私有任务
- Gulp 任务顺序执行
- Gulp 任务并发执行
- Gulp 任务重构
- Gulp 常用插件列表
- Gulp watch文件监控
- Gulp 针对不同环境的任务处理
- Gulp Api
- Gulp 常见问题
本教程前言
如果你看到的Gulp.js教程写法是下面这种的，那就是Gulp老版本的写法，现在不推荐使用了；
/*
编写任务
第一个参数：任务的名字
第二个参数：回调函数
*/
gulp.task("default", function(){
console.log('Hello 阿西河前端教程-axihe.com');
})
本教程是写于 2020 年 6 月 14 日，使用的版本是 gulp 4.0.2这个版本作为演示。
本教程最后更新于 2020年8月10日
你可以通过gulp --version查看你的本地版本。
$ gulp --version
CLI version: 2.3.0
Local version: 4.0.2
如果你第一次接触Gulp
你可能关心下面的文章，新手主要了解下src，dest，task，watch这几个API
如果你以前使用过Gulp
你可能关心下面的文章
还有一些Gulp的一些方法你可能也是非常关心的
- Gulp src()
- Gulp dest()
- Gulp symlink()
- Gulp lastRun()
- Gulp series()
- Gulp paralle()
- Gulp watch()
- Gulp task()
- Gulp registry()
- Gulp tree()
- Gulp Vinyl()
- Gulp Vinyl.isVinyl()
- Gulp Vinyl.isCustomProp()
如果在使用终于到了问题
下面这些可能会解决你遇到的问题。
- Gulp “File not found with singular glob”
- Gulp “Invalid glob argument”
- Gulp “Invalid dest() folder argument. Please specify a non-empty string or a function.”
- Gulp “Invalid output folder”
- Gulp “Did you forget to signal async completion?”
Gulp 是什么
Gulp 是 Web 开发中帮你自动完成任务的工具，基于Nodejs Stream流的批处理工具。
注意：Gulp只是被广泛用于前端构建工具使用，但是它的作用不仅仅只有这些；
- 启动 Web Server
- 当文件修改保存后，自动刷新浏览器
- 批量处理 Sass 或者 Less 文件
- babel转ES11高级版本到ES5
- 优化资源 CSS, JavaScript, 和 images
Gulp 能做的比以上更多。你甚至可以用 Gulp 创建一个静态站点生成器。
Gulp 优点
将重复操作的事情，编写成任务，需要的时候，一条命令，就可以让任务自动化执行了，比如压缩文件，发布文件等。
Gulp 本身比较简单，我们学习的时候，重要培养自己下面两点的能力，这才是 Gulp 的核心。
- 如何制定一套合理、可配置、能够真正提升我们工作效率的构建流程
- 如何在需要某个功能时，能够快速找到最合适的那个插件，且能够快速使用
特点
Gulp的任务的两大特点
- 万事皆任务
- 基于Nodejs数据流
Gulp 使用步骤
- Gulp 安装
- 在项目根目录下创建 gulpfile.js
- 在gulpfile.js文件中编写任务
- 通常是处理项目内的，一般是
src目录内文件处理到dist目录内 - 注意：gulp可以把系统人的任何文件处理到任何地方，
- 通常是处理项目内的，一般是
- 运行gulp任务
注：如果网速不给力，可以改为国内的npm源来安装，推荐查看本站的 nrm 教程，通过nrm来安装npm的一些包。
Gulp 新版和旧版区别
很久以前，我刚开始搞 gulp 的时候，写法是下面这样子的：
老版本的写法
const gulp = require("gulp")
/*
编写任务
第一个参数：任务的名字
第二个参数：回调函数
*/
gulp.task("default", function(){
console.log('Hello 阿西河前端教程-axihe.com');
})
例子仅仅作为参考，现在不推荐这么写啦,否则你会遇到错误: Gulp “Did you forget to signal async completion?”
新版本的写法
现在推荐的写法
function defaultTask(cb) {
console.log('Hello 阿西河前端教程-axihe.com');
cb();
}
exports.default = defaultTask
