一、什么是gulp（讀音：/ɡ?lp/ ）

? ? |--官方解釋：前端的自動(dòng)化構(gòu)建工具，增強(qiáng)你的工作流程。將開發(fā)流程中讓人痛苦或耗時(shí)的任務(wù)自動(dòng)化，從而
? ? 減少你所浪費(fèi)的時(shí)間，創(chuàng)造更大的價(jià)值。
? ? ? ? |--簡單：代碼優(yōu)于配置、node 最佳實(shí)踐、精簡的 API 集，gulp 讓工作前所未有的簡單。
? ? ? ? |--高效：基于 node 強(qiáng)大的流能力，gulp 在構(gòu)建過程中并不把文件立即寫入磁盤，從而提高了構(gòu)建速度。
? ? ? ? |--生態(tài)：遵循嚴(yán)格的準(zhǔn)則，確保我們的插件結(jié)構(gòu)簡單、運(yùn)行結(jié)果可控。

官網(wǎng)截圖

? ? |--非官網(wǎng)理解：是基于nodejs的前端自動(dòng)化構(gòu)建工具，其作用是壓縮文件、合并文件、格式化文件、
? ? 監(jiān)聽文件變化、部署等。大多數(shù)項(xiàng)目中，前端技術(shù)棧用于構(gòu)建打包工具一般是webpack/gulp。

二、如何安裝gulp

? ? |--第一步：因?yàn)槭腔趎odejs的自動(dòng)化構(gòu)建工具，所以先檢查是否安裝node。
? ? ? ? |--1.打開powershell(win10)或cmd
? ? ? ? |--2.powershell：win10比cmd更強(qiáng)大，具體怎么強(qiáng)大自己去查。
? ? ? ? |--3.輸入命令：node --version，我本機(jī)已經(jīng)安裝了nodejs，具體怎么安裝nodejs就不說了。

node版本信息

? ? |--第二步：安裝gulp命令行工具gulp-cli

安裝gulp-cli

? ? |--第三步：創(chuàng)建項(xiàng)目gulp-project1

創(chuàng)建項(xiàng)目

? ? |--第四步：進(jìn)入項(xiàng)目目錄，輸入命令npm init，自動(dòng)生成package.json文件

生成package.json文件

生成后的文件目錄及文件

? ? |--第五步：安裝gulp，作為開發(fā)時(shí)的依賴項(xiàng)。

安裝gulp并查看是否安裝成功

package.json添加了gulp依賴

? ? |--第六步：創(chuàng)建gulpfile.js入口文件。

創(chuàng)建gulpfile.js

? ? |--第七步：測試，在項(xiàng)目根目錄輸入gulp。

輸出結(jié)果

? ? |--上述任務(wù)中沒有實(shí)際操作，只是一個(gè)輸出。下面我們就可以在這個(gè)文件中，寫入實(shí)際的任務(wù)，進(jìn)行相關(guān)
? ? 的操作了。

三、創(chuàng)建任務(wù)（Task）

? ? |--gulp task：每一個(gè)任務(wù)都是一個(gè)異步的javascript函數(shù)，函數(shù)可以接收一個(gè)callback作為參數(shù)，或是返回
? ? stream、promise、event emitter、child process、observable類型值的函數(shù)。
? ? |--任務(wù)分為兩種：公開public和私有private
? ? ? ? |--公開的task：在gulpfile.js文件中被導(dǎo)出（export）的任務(wù)，可以通過gulp命令直接調(diào)用。
? ? ? ? |--私有的task：在內(nèi)部使用，通常作為series()或parallel()組合的組成部分。
? ? |--案例：

私有和共有任務(wù)

查看任務(wù)結(jié)構(gòu)

? ? |--組合任務(wù)
? ? ? ? |--串行任務(wù)（series）：series()函數(shù)可放入任意多個(gè)任務(wù)，順序執(zhí)行。
? ? ? ? |--平行任務(wù)（parallel ）：parallel()函數(shù)可放入任意多個(gè)任務(wù)，并行執(zhí)行。
? ? ? ? |--注意：當(dāng)使用?series()?組合多個(gè)任務(wù)（task）時(shí)，任何一個(gè)任務(wù)（task）的錯(cuò)誤將導(dǎo)致整個(gè)任務(wù)組合
????????結(jié)束，并且不會(huì)進(jìn)一步執(zhí)行其他任務(wù)。當(dāng)使用?parallel()?組合多個(gè)任務(wù)（task）時(shí)，一個(gè)任務(wù)的錯(cuò)誤將
????????結(jié)束整個(gè)任務(wù)組合的結(jié)束，但是其他并行的任務(wù)（task）可能會(huì)執(zhí)行完，也可能沒有執(zhí)行完。

串行和并行組合任務(wù)

tasks結(jié)構(gòu)

? ? ? ? |--series和parallel可以嵌套使用：

嵌套使用

結(jié)構(gòu)

? ? |--擴(kuò)展：任務(wù)的返回類型
? ? ? ? |--任務(wù)是一個(gè)異步函數(shù)，node庫有多種處理異步的功能，最常見的就是callback，上面案例中的，但是還有
? ? ? ? 很多方式，例如下面的方式：
? ? ? ? ? ? |--streams：

返回流

? ? ? ? ? ? |--promises：

返回promise對(duì)象

? ? ? ? ? ? |--event emitters：

返回event emitter

? ? ? ? ? ? |--child process：

返回child process

? ? ? ? ? ? |--observables：

返回observable

? ? ? ? ? ? |--callback：如果任務(wù)不返回任何內(nèi)容，那么必須使用callback來指示任務(wù)已經(jīng)完成。如需通過callback
? ? ? ? ? ? 把任務(wù)中的錯(cuò)誤告知gulp，那么把Error添加到callback參數(shù)中。

使用callback

四、gulp之src()、dest() 和 stream的pipe()方法

? ? |--gulp Api提供了兩個(gè)方法src()和dest()，用于處理計(jì)算機(jī)上存放的文件。
? ? ? ? |--src()：接收glob參數(shù)，從文件系統(tǒng)中讀取文件（Vinyl對(duì)象），然后生成一個(gè)Node 流（stream），他將
? ? ? ? ? ? ? ? ? ? ? 所有匹配到的文件讀取到內(nèi)存中，并通過流進(jìn)行處理。
? ? ? ? ? ? |--返回值：是一個(gè)可以在管道的開始或中間使用的流，用于根據(jù)給定的globs添加文件。
? ? ? ? ? ? |--Vinyl對(duì)象：描述文件的元數(shù)據(jù)對(duì)象，Vinyl實(shí)例的主要屬性是文件系統(tǒng)中文件核心的path和contents。
????????????|--src參數(shù)：src(globs,[options])
? ? ? ? ? ? ????|--globs：globs 是一串文字和/或通配符，如?*,?**, 或?!，用于匹配文件路徑。也可以是字符串?dāng)?shù)組。
? ? ? ? ? ? ? ? |--options：buffer、read、since、removeBOM、base、root .. ..可查看官網(wǎng)。
? ? ? ? ? ? |--.pipe()：流（stream）提供了一個(gè)主要的API是.pipe()，用于連接轉(zhuǎn)換流（Transform streams）或
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可寫流（Writable streams）。
? ? ????|--dest()：接收一個(gè)輸出目錄作為參數(shù)，并且產(chǎn)一個(gè)用于將Vinyl對(duì)象寫入到文件系統(tǒng)的Node流。通常
? ? ? ? ? ? ? ? ? ? ? ? 作為終止流(terminator stream)，當(dāng)他接受到通過管道傳輸?shù)奈募r(shí)，他會(huì)將文件內(nèi)容及文件
? ? ? ? ? ? ? ? ? ? ? ? 屬性寫入到指定目錄。
? ? ? ? ? ? |--返回值：該方法返回一個(gè)可以在管道中間或末尾使用的流，用于在文件系統(tǒng)上創(chuàng)建文件。
? ? ? ? ? ? |--dest參數(shù)：dest(directory,[options]);
? ? ? ? ? ? ????|--directory：將寫入文件的輸出目錄的路徑，如果使用一個(gè)函數(shù)，該函數(shù)將與每個(gè) Vinyl 對(duì)象一起
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 調(diào)用，并且必須返回一個(gè)字符串目錄路徑。（string/function）
? ? ? ? ? ? ????|--options：cwd、mode、dirMode、append... ...
? ? ? ? |--組合使用：大多數(shù)情況利用.pipe()方法將插件放置在src()和dest()之間，并轉(zhuǎn)換流中的文件。
? ? |--示例：

將src里的js文件輸出到output文件夾

五、glob是什么？

? ? |--定義：glob是由普通字符串和/或通配符組成的字符串，用于匹配文件路徑，可以利用一個(gè)或多個(gè)glob在文件
? ? 系統(tǒng)上定位文件。
? ? |--src第一個(gè)參數(shù)：src()?方法接受一個(gè) glob 字符串或由多個(gè) glob 字符串組成的數(shù)組作為參數(shù)，用于確定哪
????些文件需要被操作。glob 或 glob 數(shù)組必須至少匹配到一個(gè)匹配項(xiàng)，否則?src()?將報(bào)錯(cuò)。當(dāng)使用 glob 數(shù)組
????時(shí)，將按照每個(gè) glob 在數(shù)組中的位置依次執(zhí)行匹配 - 這尤其對(duì)于取反（negative） glob 有用。
? ? |--匹配規(guī)則：
? ? ????|--分隔符和字符串片段
? ? ? ? ????|--分隔符：/
? ? ? ? ????|--字符串片段：/內(nèi)容/，兩個(gè)分隔符之間的所有字符組成的字符串。
? ? ? ? ????|--注意1：在glob中，\\字符被保留作為轉(zhuǎn)義符使用。例如：‘hello_\\*_world’,星號(hào)不在是通配符，而是
? ? ? ? ? ? ? ? ? ? ? ????普通字符。
? ? ? ? ????|--注意2：避免使用node的path模塊創(chuàng)建glob，容易產(chǎn)生無效的glob。
? ? ????|--一個(gè)星號(hào)（*）：在一個(gè)字符串片段中匹配任意數(shù)量的字符，包括零個(gè)匹配。對(duì)于匹配單級(jí)目錄下的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文件很有用。不能匹配多級(jí)。

單級(jí)所有js文件匹配

? ? ? ? |--兩個(gè)星號(hào)（**）：在多個(gè)字符串片段中匹配任意數(shù)量的字符，包括零個(gè)匹配。 對(duì)于匹配嵌套目錄下的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文件很有用。請(qǐng)確保適當(dāng)?shù)叵拗茙в袃蓚€(gè)星號(hào)的 glob 的使用，以避免匹配大量不必
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?要的目錄。

匹配scr下所有js文件

? ? ? ? ? ? |--一個(gè)嘆號(hào)（!）：取反，由于 glob 匹配時(shí)是按照每個(gè) glob 在數(shù)組中的位置依次進(jìn)行匹配操作的，
????????????????????????????????????????所以 glob 數(shù)組中的取反glob 必須跟在一個(gè)非取反的 glob 后面。第一個(gè) glob 匹配到
????????????????????????????????????????一組匹配項(xiàng)，然后后面的取反 glob 刪除這些匹配項(xiàng)中的一部分。如果取反 glob 只是
????????????????????????????????????????由普通字符組成的字符串，則執(zhí)行效率是最高的。即：數(shù)組中第一項(xiàng)取出所有匹配項(xiàng)，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第二項(xiàng)去掉不想要的項(xiàng)。

取反用法

? ? ? ? ? ? |--匹配重疊：兩個(gè)或多個(gè) glob 故意或無意匹配了相同的文件就被認(rèn)為是匹配重疊了。如果在同
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?一個(gè)?src()?中使用了會(huì)產(chǎn)生匹配重疊的 glob，gulp 將盡力去除重疊部分，但是在
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?多個(gè)?src()?調(diào)用時(shí)產(chǎn)生的匹配重疊是不會(huì)被去重的。