一、gulp插件的使用
? ? |--插件的實(shí)質(zhì)：gulp插件的實(shí)質(zhì)是Node轉(zhuǎn)換流，它封裝了-通過管道（pipeline）轉(zhuǎn)換文件的常見功能。
? ? |--使用方法：使用.pipe()方法，放在.src()和dest()之間，他們可以更改經(jīng)過流的每一個(gè)文件的文件名、
? ? 元數(shù)據(jù)或文件內(nèi)容。
? ? |--gulp的插件有很多，可在npm進(jìn)行查找，每一個(gè)插件只完成指定的工作，可以把很多插件組合一起使用。
? ? |--安裝插件：npm install --save-dev 插件名
? ? |--示例1：
? ? ? ? |--安裝插件：壓縮文件（gulp-uglify）和文件重命名（gulp-rename）插件
? ? ? ? |--壓縮指定js文件，并將壓縮和修改擴(kuò)展名后的js文件存放在指定文件夾下：
? ? ? ? |--看看我要壓縮的文件ajax.js，為什么要弄一個(gè)錯(cuò)誤案例，因?yàn)樯婕暗搅硪粋€(gè)插件，就順便解決一下。
? ? ? ? |--因?yàn)樵趀s5環(huán)境中用到了es6或es7語法，就會(huì)報(bào)錯(cuò)，安裝插件babel模塊，進(jìn)行解決。
? ? ? ? |--執(zhí)行g(shù)ulp命令，結(jié)果：
? ? |--示例2：條件插件gulp-if，作用是因?yàn)椴寮牟僮鞑粦?yīng)該針對特定文件類型，因此你可能需要使用像
? ? gulp-if插件來完成轉(zhuǎn)換某些文件的操作。
? ? ? ? |--安裝gulp-if插件：
? ? ? ? |--在同一個(gè)管道下，處理js和css文件，通過條件判斷只壓縮css文件
? ? ? ? ? ? |--安裝壓縮css插件
? ? ? ? ? ? |--引入壓縮css插件
? ? ? ? ? ? |--使用gulp-if和gulp-clean-css組合處理，判斷只處理css文件，對css文件進(jìn)行壓縮
? ? ? ? ? ? |--結(jié)果：
二、文件監(jiān)控
? ? |--定義：gulp的api提供了watch()方法，利用文件系統(tǒng)的監(jiān)測程序（file system watcher）將globs和任務(wù)task
? ? 進(jìn)行關(guān)聯(lián)。對匹配glob的文件進(jìn)行監(jiān)控，如果有文件被修改了就會(huì)執(zhí)行關(guān)聯(lián)的任務(wù)。如果被執(zhí)行的task沒有
? ? 觸發(fā)異步完成信號，它將永遠(yuǎn)不會(huì)再運(yùn)行了。
? ? |--用法：
? ? |--注意：
? ? ? ? |--1.不能監(jiān)控同步任務(wù)，因?yàn)槟銓⑼饺蝿?wù)關(guān)聯(lián)到監(jiān)控程序，則無法確定任務(wù)的完成情況，任務(wù)將不會(huì)再
? ? ? ? ? ?次運(yùn)行（假定當(dāng)前正在運(yùn)行）。
? ? ? ? |--2.調(diào)用watch()之后，關(guān)聯(lián)的任務(wù)不會(huì)立即執(zhí)行，而是等到第一次文件修改后才執(zhí)行，如果需要第一次
? ? ? ? ? ?修改文件之前執(zhí)行，也就是調(diào)用watch立即執(zhí)行，設(shè)置watch('src/*.js',{ignoreInitial:false},task)
? ? ? ? |--3.watch()?方法能夠保證當(dāng)前執(zhí)行的任務(wù)不會(huì)再次并發(fā)執(zhí)行。當(dāng)文件監(jiān)控程序關(guān)聯(lián)的任務(wù)正在運(yùn)行時(shí)又有
? ? ? ? ? ?文件被修改了，那么所關(guān)聯(lián)任務(wù)的這次新的執(zhí)行將被放到執(zhí)行隊(duì)列中等待，直到上一次關(guān)聯(lián)任務(wù)執(zhí)行完
? ? ? ? ? ?之后才能運(yùn)行。每一次文件修改只產(chǎn)生一次關(guān)聯(lián)任務(wù)的執(zhí)行并放入隊(duì)列中。如果想要禁用隊(duì)列，設(shè)置：
? ?????????watch('src/*.js',{queue:false},task)
? ? ? ? |--文件更改之后，只有經(jīng)過 200 毫秒的延遲之后，文件監(jiān)控程序所關(guān)聯(lián)的任務(wù)才會(huì)被執(zhí)行。這是為了避
? ? ? ? ? ?免在同使更改許多文件時(shí)（例如查找和替換操作）過早啟動(dòng)任務(wù)（taks）的執(zhí)行。如果需要修改延遲
? ? ? ? ? ? 時(shí)間，設(shè)置：?watch('src/*.js',{delay:2000},task),單位毫秒。
? ? |--可監(jiān)控的事件：
? ? ? ? |--1.默認(rèn)只要?jiǎng)?chuàng)建、更改、刪除文件，文件監(jiān)控程序就會(huì)執(zhí)行關(guān)聯(lián)任務(wù)。
? ? ? ? |--2.如果需要使用不同事件，可以再watch方法中傳遞events參數(shù)：
? ? ? ? ? ? |--add
? ? ? ? ? ? |--addDir
? ? ? ? ? ? |--change
? ? ? ? ? ? |--unlink
? ? ? ? ? ? |--unlinkDir
? ? ? ? ? ? |--ready
? ? ? ? ? ? |--error
? ? ? ? ? ? |--all：除ready和error意外的所有事件。
三、gulp Api及常用插件使用
? ? |--Task1：將less文件轉(zhuǎn)為css文件。
? ? ? ? |--安裝插件：gulp-less
? ? ? ? |--使用：
? ? ? ? |--效果：
? ? |--Task2：復(fù)制文件
? ? |--Task3：壓縮js文件
? ? ? ? |--安裝插件gulp-uglify：壓縮js插件
? ? ? ? |--安裝插件gulp-rename：安裝重命名文件，常用于修改壓縮后文件的擴(kuò)展名（.min.js）
? ? ? ? |--安裝插件gulp-babel模塊：用于支持es6,7,8語法：
? ? ? ? |--插件安裝完畢：
? ? ? ? |--創(chuàng)建壓縮js的task：
? ? ? ? |--輸出結(jié)果：
? ? |--Task4：壓縮css文件
? ? ? ? |--安裝壓縮css插件：gulp-clean-css
? ? ? ? |--創(chuàng)建任務(wù)：
? ? ? ? |--輸出結(jié)果：
? ? |--添加監(jiān)聽：添加監(jiān)聽，針對src/index.less進(jìn)行一個(gè)監(jiān)聽，當(dāng)有修改的時(shí)候，執(zhí)行l(wèi)ess轉(zhuǎn)css操作。
? ? ? ? |--修改index.less文件內(nèi)容：
? ? ? ? |--自動(dòng)指定了task1，對less進(jìn)行了轉(zhuǎn)換為css：
? ? |--Task5：圖片壓縮
? ? ? ? |--安裝圖片壓縮插件：下面都可以
? ? ? ? ? ? |--gulp-tinypng-nokey
? ? ? ? ? ? |--gulp-imagemin
? ? ? ? ? ? |--gulp-tony-imgmin：以這個(gè)舉例
? ? ? ? |--創(chuàng)建任務(wù)：
? ? ? ? |--輸出結(jié)果：
? ? |--Task6：壓縮html文件
? ? ? ? |--安裝插件：gulp-htmlmin
? ? ? ? |--創(chuàng)建任務(wù)：去除空白
? ? ? ? |--執(zhí)行結(jié)果：
? ? |--Task7：壓縮處理后的文件，生成zip
? ? ? ? |--安裝插件：gulp-zip
? ? ? ? |--創(chuàng)建任務(wù)：壓縮整個(gè)文件夾，生成zip文件
? ? ? ? |--輸出結(jié)果：
? ? |--這里羅列的就是一些簡單的插件，和常用的幾個(gè)任務(wù)，主要是讓大家對gulp有個(gè)簡單的熟知，內(nèi)容都比較簡單，只寫個(gè)初學(xué)者，當(dāng)然我也是初學(xué)者，希望可以一起交流。
