前端工具 Gulp 與 Webpack 比較

Gulp & Webpack 基本概念

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

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

Gulp 是什麼?

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

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

如何安裝 GULP？

讓專案使用 Gulp 自動化編譯

GULP 提供的 API

指令	解釋
gulp.task()	執行工作
gulp.src()	檔案來源
gulp.dest()	處理後的檔案輸出位置
gulp.pipe()	串流來源檔案到另個外掛
gulp.watch ()	監控任務，當檔案有更動時，便會執行相對應的任務

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|