Gulp和Webpack特點對比??

Gulp

Gulp側(cè)重于前端開發(fā)的整個過程的控制管理（像是流水線），Gulp是對整個過程進行控制，所以在其配置文件（gulpfile.js）中配置的每一個task對項目中該task配置路徑下所有的資源都可以管理，我們可以通過給gulp配置不通的task（通過Gulp中的gulp.task()方法配置，比如啟動server、sass/less預(yù)編譯、文件的合并壓縮等等）來讓gulp實現(xiàn)不同的功能，從而構(gòu)建整個前端開發(fā)流程。

Webpack

Webpack有人也稱之為?模塊打包機?，由此也可以看出Webpack更側(cè)重于模塊打包，當(dāng)然我們可以把開發(fā)中的所有資源（圖片、js文件、css文件等）都可以看成模塊，最初Webpack本身就是為前端JS代碼打包而設(shè)計的，后來被擴展到其他資源的打包處理。Webpack是通過loader（加載器）和plugins（插件）對資源進行處理的。

FIS3

集合了webpack的根據(jù)依賴關(guān)系進行模塊打包的能力，同時也保留了對項目每個文件的編譯能力。

FIS3 是以 File 對象為中心構(gòu)建編譯的，每一個 File 都要經(jīng)歷編譯、打包、發(fā)布三個階段。

lint：代碼校驗檢查，比較特殊，所以需要?release?命令命令行添加?-l?參數(shù)

parser：預(yù)處理階段，比如 less、sass、es6、react 前端模板等都在此處預(yù)編譯處理

preprocessor：標(biāo)準化前處理插件

standard：標(biāo)準化插件，處理內(nèi)置語法等

postprocessor：標(biāo)準化后處理插件

optimizer：啟用優(yōu)化處理插件，js、css代碼壓縮等

FIS3基礎(chǔ)應(yīng)用

fis.match()

fis.match(selector, props);

FIS3 把匹配文件路徑的路徑作為selector，匹配到的文件會分配給它設(shè)置的?props。

捕獲分組：

使用?node-glob?捕獲的分組，可以用于其他屬性的設(shè)定，如?release,?url,?id?等。使用的方式與正則替換類似，我們可以用 $1, $2, $3 來代表相應(yīng)的捕獲分組。其中 $0 代表的是 match 到的整個字符串。

```javascript

????fis.match('/a/(**.js)', {release:'/b/$0'// $0 代表 /a/(**.js) 匹配的內(nèi)容});

````

fis.match('/a/(**.js)', {

release: '/b/$1' // $1 代表 (**.js) 匹配的內(nèi)容

});