前端工具 Gulp 與 Webpack 比較

Gulp & Webpack 基本概念

gulp 是 task runner 任務管理工具。
Webpack 是 module bundler 模組整合工具。
Webpack 和 gulp 兩個是不重疊的，他們本身都有 95% 的功能是不能被對方替代。
兩者是截然不同的工具，但是恰巧都能夠達到部分功能，所以容易被混淆：

1. 使用 Babel 將 ES6 編譯成 ES5 語法。
2. 將 SASS 檔編譯成 CSS 檔
3. 壓縮 CSS, JS, 圖檔等

Gulp 是什麼?

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

Gulp 是 task runner 任務管理工具。
目的：提供自動化與流程管理，整合前端開發環境，藉由簡化工作量，可讓開發者將重點放在功能的開發上。
功能：提供自訂任務流程，例如 babel、scss、壓縮、重新整理、校正時間等。

如何安裝 GULP？

讓專案使用 Gulp 自動化編譯

GULP 提供的 API

Gulp 的常用 Plugin

在 src 和 dest 之間加入這些 plugin，可以幫助我們建構自動化工作流程。
|插件 | 用途 |
| -------- | -------- |
|gulp-babel |轉換語法|
|gulp-sass |將 sass 轉換成 css|
|gulp-htmlmin|壓縮 HTML|
|gulp-clean-css|壓縮 CSS|
|gulp-uglify|壓縮 javascript|
|gulp-imagemin|壓縮圖片|
|gulp-concat|合併多個檔案|
|browser-sync|瀏覽器同步檢視|
|gulp-ejs|動態生出html|

Webpack 是什麼?

Webpack是一個模組打包機，可以將許多鬆散的模組按照依賴和規則打包，然後在瀏覽器上運行，解決舊瀏覽器不支援部分新語法的問題，也利於後續管理與維護。

透過loader的轉換，任何形式的資源都可以是做模組。 -- 一切皆模組啦!!!

關於 Webpack 5