前端架構gulp與webpack（知識點整理）

一 概念介紹

gulp 是 task runner，Webpack 是 module bundler。能夠這麼說， Webpack 和 gulp 自己都有 95% 的功能是不能被對方替代，或者直接說和對方不重疊的。

1 什麼是gulp

Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理

1.1 gulp的核心功能：

1. 任務定義和組織；
2. 基於文件 stream 的構建；
3. 插件體系；

gulp適用於任何JavaScript的場合，就相似一個大的管理框架，其中的任務，與任務須要的工具都要手動去編寫與引入，對總體的一個把控

2 什麼是webpack

Webpack相似於一個模塊打包機 能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。體現出的意義就是：一切皆模塊 經過 loader的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

2.1 webpack的核心功能

1. 按照模塊的依賴構建目標文件；
2. loader 體系支持不一樣的模塊；
3. 插件體系提供更多額外的功能；

---

二 Gulp和Webpack功能實現對比

主要從如下方面對兩種框架作一下對比

1 概念上

Gulp側重於前端開發的整個過程的控制管理（像是流水線），咱們能夠經過給gulp配置不通的task（經過Gulp中的gulp.task()方法配置，好比啓動server、sass/less預編譯、文件的合併壓縮等等）來讓gulp實現不一樣的功能，從而構建整個前端開發流程。

Webpack有人也稱之爲模塊打包機，由此也能夠看出Webpack更側重於模塊打包，固然咱們能夠把開發中的全部資源（圖片、js文件、css文件等）均可以當作模塊，最初Webpack自己就是爲前端JS代碼打包而設計的，後來被擴展到其餘資源的打包處理。Webpack是經過loader（加載器）和plugins（插件）對資源進行處理的。

另外咱們知道Gulp是對整個過程進行控制，因此在其配置文件（gulpfile.js）中配置的每個task對項目中該task配置路徑下全部的資源均可以管理。
好比，對sass文件進行預編譯的task能夠對其配置路徑下的全部sass文件進行預編譯處理：

gulp.task('sass',function(){
    gulp.src('src/styles/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('./build/prd/styles/'));//編譯後的輸出路徑
});

---

Webpack則不是這樣管理資源的，它是根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源(以下圖)。

1. 須要把各類資源（js/ts/css/html/ejs/img/fonts等等）都當作 module；
2. module之間必須是互相依賴的，在 js 裏 import 模板、圖片、樣式文件等等，樣式文件經過 url()和圖片字體關聯；這種依賴關係必須是 webpack 既定的或者是經過插件能夠理解的關係。

Webpack 的核心就是模塊化地組織，模塊化地依賴，而後模塊化地打包。相對來上，場景侷限在前端模塊化打包上；雖然用 gulp + 插件的方式也能實現，但目前看 Webpack 在依賴的模塊化構建上是無人可以替代的。

通俗的說，Webpack就是須要經過其配置文件（webpack.config.js）中entry配置的一個入口文件（JS文件）

entry: {
      app:__dirname + "/src/scripts/app.js",
}

而後Webpack進入該app.js文件進行解析，app.js

//引入scss文件
   import '../style/app.scss';
    
   //引入依賴模塊
   var greeter = require('./Greeter.js');
   document.getElementById('root').appendChild(greeter());

解析過程當中，發現一個app.scss文件，而後根據webpack.config.js配置文件中的module.loaders屬性去查找處理.scss文件的loader進行處理，處理app.scss文件過程當中，若是發現該文件還有其餘依賴文件，則繼續處理app.scss文件的依賴文件，直至處理完成該「鏈路」上的依賴文件，而後又遇到一個Greeter.js模塊，因而像以前同樣繼續去查找對應的loader去處理...
因此，Webpack中對資源文件的處理是經過入口文件產生的依賴造成的，不會像Gulp那樣，配置好路徑後，該路徑下全部規定的文件都會受影響。

---

2 模塊化開發

概念：其實就是利用CommonJS、AMD、CMD等方式對靜態資源文件進行引入管理，而後最終發佈時達成相應的模塊依賴包，就是爲了將代碼進行解耦合
先來看下gulp

Gulp
   |——dist:  項目輸出路徑
   |    |——module:  開發模塊（遵循就近依賴原則）
   |        |——index: 首頁模塊
   |        |——my: 個人模塊
   |——commons:  公用靜態文件
   |——src: 工做目錄
   |    |——module:  開發模塊（遵循就近依賴原則）
   |        |——index: 首頁模塊
   |            |——action_.js: 開發js（es6語法）
   |            |——**.scss: sass模板語言
   |            |——vue**.js: vue模板
   |        |——my: 個人模塊
   |——gulpfile.js: gulp的配置文件
   |——index.html: 主頁html文件
   |——package.json: npm包管理配置文件

而後經過編寫task命令對 文件進行css轉譯，js壓縮/轉譯，img，html壓縮等等操做

---

webpack目錄

主要對entry入口文件中全部的依賴以及後續依賴進行分析，對公共文件進行抽取分離壓縮打包

3 開發過程當中的依賴導入

gulp中大部分靜態文件都是已經標籤化插入好的（若是js文件中使用import和require的es6語法，打包還要另外加入插件plugin和browserify，與其這樣像webpack靠攏不如直接拿來webpack配置各司其職，相互配合，這也是一種gulp+webpack的模式）
webpack 能夠隨用隨插，按需加載（gulp中目前我使用的是require--採用強依賴模式已經把須要的模塊提早注入好了）和打包
因此就方便程度和學習成原本說，webpack更勝一籌

4 進行可視化打包分析

gulp還沒嘗試過，不知道相關插件可否作到，不過webpack因爲社區比較活躍，對應的可視化分析插件不少，其中一個就是

npm install --save-dev webpack-bundle-analyzer

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
// ...
plugins: [new BundleAnalyzerPlugin()]
// ...

npm連接地址

運行後生成的相關圖形化分析張這樣，至關全面的顯示了各個包的狀況，簡直不能太屌

其中相關引用：
連接描述
連接描述