前端開發(fā)和其他開發(fā)工作的主要區(qū)別坑质，首先是前端是基于多語言患雇、多層次的編碼和組織工作，其次前端產(chǎn)品的交付是基于瀏覽器淮野，這些資源是通過增量加載的方式運(yùn)行到瀏覽器端捧书，如何在開發(fā)環(huán)境組織好這些碎片化的代碼和資源吹泡，并且保證他們?cè)跒g覽器端快速、優(yōu)雅的加載和更新经瓷，就需要一個(gè)模塊化系統(tǒng)爆哑，這個(gè)理想中的模塊化系統(tǒng)是前端工程師多年來一直探索的難題。

Gulp

Gulp就是為了規(guī)范前端開發(fā)流程舆吮，實(shí)現(xiàn)前后端分離揭朝、模塊化開發(fā)、版本控制色冀、文件合并與壓縮潭袱、mock數(shù)據(jù)等功能的一個(gè)前端自動(dòng)化構(gòu)建工具。說的形象點(diǎn)锋恬，“Gulp就像是一個(gè)產(chǎn)品的流水線屯换，整個(gè)產(chǎn)品從無到有，都要受流水線的控制伶氢，在流水線上我們可以對(duì)產(chǎn)品進(jìn)行管理趟径”窭簦”

另外癣防，Gulp是通過task對(duì)整個(gè)開發(fā)過程進(jìn)行構(gòu)建。

Webpack

Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具掌眠。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源蕾盯。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載蓝丙。通過 loader的轉(zhuǎn)換级遭，任何形式的資源都可以視作模塊，比如 CommonJs 模塊渺尘、AMD 模塊挫鸽、ES6 模塊、CSS鸥跟、圖片丢郊、JSON、Coffeescript医咨、LESS 等枫匾。

Gulp和Webpack功能實(shí)現(xiàn)對(duì)比

簡(jiǎn)單介紹了一下Gulp和Webpack的概念性的問題和大環(huán)境，接下來進(jìn)入本文的主題拟淮，對(duì)比一下Gulp和Webpack的優(yōu)缺點(diǎn)干茉。將從基本概念、模塊化開發(fā)很泊、文件合并與壓縮角虫、啟動(dòng)本地Server沾谓、mock數(shù)據(jù)、版本控制幾個(gè)方面對(duì)Gulp和Webpack進(jìn)行對(duì)比戳鹅。

基本概念

首先從概念上搏屑，我們可以清楚的看出，Gulp和Webpack的側(cè)重點(diǎn)是不同的粉楚。

Gulp側(cè)重于前端開發(fā)的整個(gè)過程的控制管理（像是流水線）辣恋，我們可以通過給gulp配置不通的task（通過Gulp中的gulp.task()方法配置，比如啟動(dòng)server模软、sass/less預(yù)編譯伟骨、文件的合并壓縮等等）來讓gulp實(shí)現(xiàn)不同的功能，從而構(gòu)建整個(gè)前端開發(fā)流程燃异。

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

另外我們知道Gulp是對(duì)整個(gè)過程進(jìn)行控制忘瓦，所以在其配置文件（gulpfile.js）中配置的每一個(gè)task對(duì)項(xiàng)目中該task配置路徑下所有的資源都可以管理搁廓。
Webpack則不是這樣管理資源的，它是根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析耕皮，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源

模塊化開發(fā)

所謂的前端模塊化開發(fā)是指境蜕，在開發(fā)的時(shí)候，把不通的資源文件按照他的具體用途進(jìn)行分類管理凌停，在使用的時(shí)候利用CommonJS粱年、AMD、CMD等規(guī)范將這些資源文件引入到當(dāng)前文件中罚拟。然后在測(cè)試或者最后上線的時(shí)候台诗，將這些資源文件按照一定的要求進(jìn)行壓縮合并再加上版本控制處理。即對(duì)內(nèi)容的管理舟舒，是為了解耦合拉庶。

在實(shí)際開發(fā)過程中，在src目錄下工作秃励，html氏仗、js和css等文件通過gulp的task配置，執(zhí)行合并和壓縮后輸出到build目錄下。在詳細(xì)一點(diǎn)就是：

1. 創(chuàng)建主頁html文件
2. 創(chuàng)建與之對(duì)應(yīng)的app.js入口文件和app.scss入口文件皆尔。這兩個(gè)文件只通過CommonJS規(guī)范引入各自views文件中自定義的js(或scss)文件呐舔，具體邏輯不寫此文件中。
3. 在views目錄下編寫js（或css）文件的邏輯代碼慷蠕，其中如果多個(gè)文件需要公共邏輯或者工具方法珊拼，就可以抽離出來在util文件夾下創(chuàng)建對(duì)應(yīng)的公共方法，然后在views中需要的js（或css）文件中通過CommonJS規(guī)范引入使用流炕。libs目錄下的第三方庫(kù)或框架也是這個(gè)思想去引用澎现。
4. scripts目錄下的tpls文件是用來放置html模板的，引用方式和引用libs相同每辟。

webpack的模塊化實(shí)現(xiàn)和Gulp的基本相同剑辫，只不過實(shí)現(xiàn)過程中使用到的插件或者說模塊不同，配置不同而已渠欺。對(duì)于解決webpack文件之間的依賴關(guān)系妹蔽，可以使用extract-text-webpack-plugin的模塊將css文件從js文件中剝離出來。

文件合并與壓縮

上面的模塊化中挠将，模塊化其實(shí)很大一部分是在做文件的合并與壓縮操作胳岂。
Webpack應(yīng)該比Gulp更擅長(zhǎng)文件合并和壓縮，畢竟人家被稱為模塊打包機(jī)舔稀。

Gulp可以對(duì)css文件以及js文件進(jìn)行合并壓縮處理乳丰，而Webpack可以實(shí)現(xiàn)對(duì)css文件，js文件镶蹋，html文件等進(jìn)行合并壓縮和圖片的壓縮成艘，還可以對(duì)js文件進(jìn)行編譯（如es6–>es5，react jsx）等等贺归，這些都是通過Webpack的loader實(shí)現(xiàn)的，當(dāng)然這些也可以加入到Gulp中断箫，畢竟Gulp把Webpack當(dāng)做一個(gè)模塊拂酣，通過gulp-webpack都引入了。

啟動(dòng)server

gulp啟動(dòng)server: gulp-server模塊

livereload:true屬性只是監(jiān)控到我們修改文件后刷新瀏覽器重新請(qǐng)求文件

webpack啟動(dòng)server: webpack-dev-server模塊
一是為靜態(tài)文件提供server服務(wù)婶熬，二是自動(dòng)刷新和熱替換(HMR)

webpack-dev-server --inline --hot

mock數(shù)據(jù)

Gulp中對(duì)mock數(shù)據(jù)的實(shí)現(xiàn)使通過NodeJS內(nèi)置的fs模塊和url模塊實(shí)現(xiàn)的。
具體來說埃撵，就是通過NodeJS攔截http請(qǐng)求赵颅，根據(jù)請(qǐng)求URL來模擬后端做出處理后返回不同的數(shù)據(jù)。
webpack通過json-server來實(shí)現(xiàn)暂刘，它的實(shí)現(xiàn)原理就是饺谬，啟動(dòng)一個(gè)本地3000端口作為mock數(shù)據(jù)的端口，然后我們?cè)赪ebpack中配置一個(gè)代理谣拣，讓所有請(qǐng)求代理到3000端口上去募寨，就可以獲取到數(shù)據(jù)了族展。

版本控制

gulp通過gulp-rev和gulp-rev-collector模塊，前者用于生成文件的MD5碼文件和按MD5碼命名的資源文件拔鹰，后者是利用MD5碼仪缸，對(duì)文件名進(jìn)行替換。
Webpack中需要版本控制的有css列肢、js文件恰画，不過Webpack的版本控制只實(shí)現(xiàn)了將css、js文件添加hash值方式命名的文件方式瓷马，修改引用路徑中的文件名需手動(dòng)實(shí)現(xiàn)锣尉。
不過實(shí)現(xiàn)確實(shí)很簡(jiǎn)單，只需要將webpack.config.js配置文件中的output.filename和plugins中的輸出文件名稱修改一下即可决采。

總結(jié)

Gulp側(cè)重整個(gè)過程的控制自沧，Webpack在模塊打包方面有特別出眾。所以树瞭，Gulp + Webpack 組合使用更方便拇厢。

參考自：兩者對(duì)比
webpack
gulp
未閱讀：
gulp+webpack1
gulp+webpack2
gulp+webpack3