一、什么是gulp（读音：/ɡʌlp/ ）
|--官方解释：前端的自动化构建工具，增强你的工作流程。将开发流程中让人痛苦或耗时的任务自动化，从而
减少你所浪费的时间，创造更大的价值。
|--简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。
|--高效：基于 node 强大的流能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
|--生态：遵循严格的准则，确保我们的插件结构简单、运行结果可控。
官网截图
|--非官网理解：是基于nodejs的前端自动化构建工具，其作用是压缩文件、合并文件、格式化文件、
监听文件变化、部署等。大多数项目中，前端技术栈用于构建打包工具一般是webpack/gulp。
二、如何安装gulp
|--第一步：因为是基于nodejs的自动化构建工具，所以先检查是否安装node。
|--1.打开powershell(win10)或cmd
|--2.powershell：win10比cmd更强大，具体怎么强大自己去查。
|--3.输入命令：node --version，我本机已经安装了nodejs，具体怎么安装nodejs就不说了。
node版本信息
|--第二步：安装gulp命令行工具gulp-cli
安装gulp-cli
|--第三步：创建项目gulp-project1
创建项目
|--第四步：进入项目目录，输入命令npm init，自动生成package.json文件
生成package.json文件
生成后的文件目录及文件
|--第五步：安装gulp，作为开发时的依赖项。
安装gulp并查看是否安装成功
package.json添加了gulp依赖
|--第六步：创建gulpfile.js入口文件。
创建gulpfile.js
|--第七步：测试，在项目根目录输入gulp。
输出结果
|--上述任务中没有实际操作，只是一个输出。下面我们就可以在这个文件中，写入实际的任务，进行相关
的操作了。
三、创建任务（Task）
|--gulp task：每一个任务都是一个异步的javascript函数，函数可以接收一个callback作为参数，或是返回
stream、promise、event emitter、child process、observable类型值的函数。
|--任务分为两种：公开public和私有private
|--公开的task：在gulpfile.js文件中被导出（export）的任务，可以通过gulp命令直接调用。
|--私有的task：在内部使用，通常作为series()或parallel()组合的组成部分。
|--案例：
私有和共有任务
查看任务结构
|--组合任务
|--串行任务（series）：series()函数可放入任意多个任务，顺序执行。
|--平行任务（parallel ）：parallel()函数可放入任意多个任务，并行执行。
|--注意：当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合
结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将
结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。
串行和并行组合任务
tasks结构
|--series和parallel可以嵌套使用：
嵌套使用
结构
|--扩展：任务的返回类型
|--任务是一个异步函数，node库有多种处理异步的功能，最常见的就是callback，上面案例中的，但是还有
很多方式，例如下面的方式：
|--streams：
返回流
|--promises：
返回promise对象
|--event emitters：
返回event emitter
|--child process：
返回child process
|--observables：
返回observable
|--callback：如果任务不返回任何内容，那么必须使用callback来指示任务已经完成。如需通过callback
把任务中的错误告知gulp，那么把Error添加到callback参数中。
使用callback
四、gulp之src()、dest() 和 stream的pipe()方法
|--gulp Api提供了两个方法src()和dest()，用于处理计算机上存放的文件。
|--src()：接收glob参数，从文件系统中读取文件（Vinyl对象），然后生成一个Node 流（stream），他将
所有匹配到的文件读取到内存中，并通过流进行处理。
|--返回值：是一个可以在管道的开始或中间使用的流，用于根据给定的globs添加文件。
|--Vinyl对象：描述文件的元数据对象，Vinyl实例的主要属性是文件系统中文件核心的path和contents。
|--src参数：src(globs,[options])
|--globs：globs 是一串文字和/或通配符，如 *, **, 或 !，用于匹配文件路径。也可以是字符串数组。
|--options：buffer、read、since、removeBOM、base、root .. ..可查看官网。
|--.pipe()：流（stream）提供了一个主要的API是.pipe()，用于连接转换流（Transform streams）或
可写流（Writable streams）。
|--dest()：接收一个输出目录作为参数，并且产一个用于将Vinyl对象写入到文件系统的Node流。通常
作为终止流(terminator stream)，当他接受到通过管道传输的文件时，他会将文件内容及文件
属性写入到指定目录。
|--返回值：该方法返回一个可以在管道中间或末尾使用的流，用于在文件系统上创建文件。
|--dest参数：dest(directory,[options]);
|--directory：将写入文件的输出目录的路径，如果使用一个函数，该函数将与每个 Vinyl 对象一起
调用，并且必须返回一个字符串目录路径。（string/function）
|--options：cwd、mode、dirMode、append... ...
|--组合使用：大多数情况利用.pipe()方法将插件放置在src()和dest()之间，并转换流中的文件。
|--示例：
将src里的js文件输出到output文件夹
五、glob是什么？
|--定义：glob是由普通字符串和/或通配符组成的字符串，用于匹配文件路径，可以利用一个或多个glob在文件
系统上定位文件。
|--src第一个参数：src() 方法接受一个 glob 字符串或由多个 glob 字符串组成的数组作为参数，用于确定哪
些文件需要被操作。glob 或 glob 数组必须至少匹配到一个匹配项，否则 src() 将报错。当使用 glob 数组
时，将按照每个 glob 在数组中的位置依次执行匹配 - 这尤其对于取反（negative） glob 有用。
|--匹配规则：
|--分隔符和字符串片段
|--分隔符：/
|--字符串片段：/内容/，两个分隔符之间的所有字符组成的字符串。
|--注意1：在glob中，\\字符被保留作为转义符使用。例如：‘hello_\\*_world’,星号不在是通配符，而是
普通字符。
|--注意2：避免使用node的path模块创建glob，容易产生无效的glob。
|--一个星号（*）：在一个字符串片段中匹配任意数量的字符，包括零个匹配。对于匹配单级目录下的
文件很有用。不能匹配多级。
单级所有js文件匹配
|--两个星号（**）：在多个字符串片段中匹配任意数量的字符，包括零个匹配。 对于匹配嵌套目录下的
文件很有用。请确保适当地限制带有两个星号的 glob 的使用，以避免匹配大量不必
要的目录。
匹配scr下所有js文件
|--一个叹号（!）：取反，由于 glob 匹配时是按照每个 glob 在数组中的位置依次进行匹配操作的，
所以 glob 数组中的取反glob 必须跟在一个非取反的 glob 后面。第一个 glob 匹配到
一组匹配项，然后后面的取反 glob 删除这些匹配项中的一部分。如果取反 glob 只是
由普通字符组成的字符串，则执行效率是最高的。即：数组中第一项取出所有匹配项，
第二项去掉不想要的项。
取反用法
|--匹配重叠：两个或多个 glob 故意或无意匹配了相同的文件就被认为是匹配重叠了。如果在同
一个 src() 中使用了会产生匹配重叠的 glob，gulp 将尽力去除重叠部分，但是在
多个 src() 调用时产生的匹配重叠是不会被去重的。
网友评论