前端工具 Gulp 與 Webpack 比較


Posted by hoyi-23 on 2021-08-12

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.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|


Webpack 是什麼?

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

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

關於 Webpack 5


#gulp #Webpack







Related Posts

簡明程式解題入門 - 字串篇 I

簡明程式解題入門 - 字串篇 I

佈署網站

佈署網站

JavaScript 中的同步與非同步 & event loop

JavaScript 中的同步與非同步 & event loop


Comments