一、什么是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就不说了。
|--第二步:安装gulp命令行工具gulp-cli
|--第三步:创建项目gulp-project1
|--第四步:进入项目目录,输入命令npm init,自动生成package.json文件
|--第五步:安装gulp,作为开发时的依赖项。
|--第六步:创建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)可能会执行完,也可能没有执行完。
|--series和parallel可以嵌套使用:
|--扩展:任务的返回类型
|--任务是一个异步函数,node库有多种处理异步的功能,最常见的就是callback,上面案例中的,但是还有
很多方式,例如下面的方式:
|--streams:
|--promises:
|--event emitters:
|--child process:
|--observables:
|--callback:如果任务不返回任何内容,那么必须使用callback来指示任务已经完成。如需通过callback
把任务中的错误告知gulp,那么把Error添加到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()之间,并转换流中的文件。
|--示例:
五、glob是什么?
|--定义:glob是由普通字符串和/或通配符组成的字符串,用于匹配文件路径,可以利用一个或多个glob在文件
系统上定位文件。
|--src第一个参数:src() 方法接受一个 glob 字符串或由多个 glob 字符串组成的数组作为参数,用于确定哪
些文件需要被操作。glob 或 glob 数组必须至少匹配到一个匹配项,否则 src() 将报错。当使用 glob 数组
时,将按照每个 glob 在数组中的位置依次执行匹配 - 这尤其对于取反(negative) glob 有用。
|--匹配规则:
|--分隔符和字符串片段
|--分隔符:/
|--字符串片段:/内容/,两个分隔符之间的所有字符组成的字符串。
|--注意1:在glob中,\\字符被保留作为转义符使用。例如:‘hello_\\*_world’,星号不在是通配符,而是
普通字符。
|--注意2:避免使用node的path模块创建glob,容易产生无效的glob。
|--一个星号(*):在一个字符串片段中匹配任意数量的字符,包括零个匹配。对于匹配单级目录下的
文件很有用。不能匹配多级。
|--两个星号(**):在多个字符串片段中匹配任意数量的字符,包括零个匹配。 对于匹配嵌套目录下的
文件很有用。请确保适当地限制带有两个星号的 glob 的使用,以避免匹配大量不必
要的目录。
|--一个叹号(!):取反,由于 glob 匹配时是按照每个 glob 在数组中的位置依次进行匹配操作的,
所以 glob 数组中的取反glob 必须跟在一个非取反的 glob 后面。第一个 glob 匹配到
一组匹配项,然后后面的取反 glob 删除这些匹配项中的一部分。如果取反 glob 只是
由普通字符组成的字符串,则执行效率是最高的。即:数组中第一项取出所有匹配项,
第二项去掉不想要的项。
|--匹配重叠:两个或多个 glob 故意或无意匹配了相同的文件就被认为是匹配重叠了。如果在同
一个 src() 中使用了会产生匹配重叠的 glob,gulp 将尽力去除重叠部分,但是在
多个 src() 调用时产生的匹配重叠是不会被去重的。