简介
Gulp 基于Node.js的前端自动化构建工具
- 任务化
- 基于流（输入流和输出流）
- 异步执行任务
- 底层封装基于Node的读写模块
主要用途：
- css处理：压缩，转码（比如自动添加兼容前缀）
- js处理：压缩，转码（ES6语法转ES5 ， Typescript, Coffescript）
- html处理：压缩，转码（格式转换，比如pug模板转.html）
- 静态文件处理（图片等等）
gulpfile.js
gulpfile.js位于gulp项目的根目录，用于编写执行gulp任务的程序，使用Javascript编写，可以调用Node模块
gulp每个任务都可以编写到一个独立的文件中，在gulpfile.js中通过import的方式引入，便于维护。
主要API介绍
API文档：https://www.gulpjs.com.cn/docs/api/concepts/
gulp提供一系列的API来构建和控制每个任务流程，下面介绍的是在gulp开发中主要用到的API
gulp.src(path);
path 指定源文件的路径
作用：查找指定的目标源文件，读取文件到内存中，返回文件流、
示例：
gulp.src('./a/b.html');指定某个文件gulp.src('./a/*.html');指定某个目录下的所有扩展名为.htmlgulp.src('./a/**');指定目录下的所有文件
gulp.dest(path);
指定输出文件目录，将经过处理之后的文件输出到该目录下
gulp.dest('./dist');gulp.task();
创建一个基于流的gulp任务
gulp.task('[任务名]', function() {
//具体任务的业务逻辑
});gulp.watch(路径, 任务名)
监听文件改变，执行任务
gulp.watch('./a/*.*' , 'html');gulp.series(taskA, taskB)
逐个执行多个任务，即taskA执行完了，再执行taskB
function taskA() {
// 任务A
}
function taskB() {
//任务B
}
gulp.series(taskA, taskB);gulp.parallel(taskA, taskB)
并行执行多个任务，即taskA和taskB同时执行
function taskA() {
// 任务A
}
function taskB() {
// 任务B
}
gulp.parallel(taskA, taskB);gulp.pipe(gulpTask)
管道函数，接收当前的流处理完了，再传递到一下个管道任务
gulp.src('./src').pipe(压缩).pipe(转码).pipe(dest('./dist'));插件
插件是构建gulp任务时常常会使用一些插件来完成特定的工作，比如压缩文件，合并文件，转换程序等等。
常见的插件（实战章节会对相关的插件使用进行介绍）：
- gulp-concat 合并文件
- gulp-uglify 压缩js文件
- gulp-less 编译less
- gulp-mincss 压缩CSS
- gulp-sass CSS预编译
使用方法：
- 安装
npm install gulp-concat --save-dev - 引用
const concat = require('gulp-concat'); - 调用
gulp.pipe(concat())