webpack 與 gulp 差多了好嗎?


Posted by s103071049 on 2021-07-08

他們能做到的事情部分相同(資源轉換),但定位完全不同。

gulp

gulp 是 task manager,舉例來說,我有各種 task (babel, scss, rename, minify),這些 task 要做甚麼事情,是我決定好的。使用 gulp 只是將這些要執行的任務用規則寫下來(如 : 任務執行的優先順序)。

task 可以是 anything。我的 task 可以自己寫,可以是校正時間、擷取網站圖片、打某個 api、清空桌面......。

gulp 做不到 bundle,但我可以藉由 webpack plugin 去打包。

gulp 的目的是管理任務,所以額外的其他功能都需要靠 plugin 幫忙。只要可以寫出的 task,gulp 都做的到。gulp 本身可以做到幾乎 anything。

webpack

webpack 是 bundler,舉例來說,我有很多資源(img, sass, js),webpack 就可以將這些資源都打包在一起。在 bundle 前要先經過 loader 將資源先載入進 webpack,webpack 再進行打包。載入前,可以額外先做一些事情,比方說 js 在 load 進來前可以先經過 babel loader;sass 也是一樣,可以先經過 sass 的 loader 再包進去 webpack。

webpack 做不到某些 task (校正時間、定時 call api)

webpack 主要的功能就是 bundle。

為甚麼要 bundle ? 因為瀏覽器以前原生沒有支援 require 之類的東西,bundle 之後就可以支援。

總結

webpack is module bundler;gulp is task manager。

  1. 任何跟 webpack 有關的內容,就是在調整 loader and plugin。
  2. webpack 將模組的概念擴展到任何的資源。

#gulp #Webpack







Related Posts

實作留言板前端頁面

實作留言板前端頁面

Progressive Web App 會是未來趨勢嗎?

Progressive Web App 會是未來趨勢嗎?

Facebook粉絲頁分析三部曲-爬取,分析,預測

Facebook粉絲頁分析三部曲-爬取,分析,預測


Comments