gulp與webpack的區別?是一種工具嗎?

2022-07-04 06:57:11 字數 1020 閱讀 6660

問:gulp和webpack什麼關係,是一種東西嗎?可以只用gulp,不用webpack嗎 或者反過來?有什麼區別?

答:gulp是工具鏈、自動化構建工具,可以配合各種外掛程式,我們不用再做機械重複的工作,替代手工實現自動化工作。

完成 js壓縮,css壓縮,less編譯 ,檢查語法 , 自動重新整理頁面。

1.構建工具 2.自動化 3.提高效率用

webpack是檔案打包工具,可以把專案的各種js檔案、css檔案等打包合併成乙個或多個檔案,主要用於模組化方案,預編譯模組的方案。

1.打包工具 2.模組化識別 3.編譯模組**方案用

所以定義和用法上來說 都不是一種東西,無可比性,更不衝突!【當然,也有相似的功能,比如合併,區分,但各有各的優勢】

釋:gulp應該和grunt比較,區別就不說了,說說用處吧。

gulp / grunt 是一種工具,能夠優化前端工作流程。

比如自動重新整理頁面、combo、壓縮css、js、自動編譯less、sass為css等等。

簡單來說,就是使用gulp/grunt,然後配置你需要的外掛程式,就可以把以前需要手工做的事情讓它幫你做了。

browserify / webpack ,那還要說到 seajs / requirejs 。這四個都是js模組化的方案。

其中seajs / require 是一種型別,browserify / webpack 是另一種型別。

這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模組化。

browserify / webpack : 是乙個預編譯模組的方案,相比於上面 ,這個方案更加智慧型。

沒用過browserify,這裡以webpack為例。首先,它是預編譯的,不需要在瀏覽器中載入直譯器。

另外,你在本地直接寫js,不管是 amd / cmd / es6 風格的模組化,它都能認識,並且編譯成瀏覽器認識的js。

這樣就知道,gulp是乙個工具,而webpack等等是模組化方案。gulp也可以配置seajs、requirejs甚至webpack的外掛程式。

gulp與webpack的區別

常有人拿gulp與webpack來比較,知道這兩個構建工具功能上有重疊的地方,可單用,也可一起用,但本質的區別就沒有那麼清晰。gulp gulp強調的是前端開發的工作流程,我們可以通過配置一系列的task,定義task處理的事務 例如檔案壓縮合併 雪碧圖 啟動server 版本控制等 然後定義執行順...

gulp與webpack的區別

常有人拿gulp與webpack來比較,知道這兩個構建工具功能上有重疊的地方,可單用,也可一起用,但本質的區別就沒有那麼清晰。gulp gulp強調的是前端開發的工作流程,我們可以通過配置一系列的task,定義task處理的事務 例如檔案壓縮合併 雪碧圖 啟動server 版本控制等 然後定義執行順...

webpack與gulp的區別

gulp 強調的是前端開發的流程,通過配置一系列的task,定義task處理的事務 例如 檔案壓縮合併,啟動server 然後定義執行順序,來讓gulp執行task,從而構建其前端專案的流程。合併後仍然是你寫的 只是區域性變數名被替換,一些語法做了轉換而已,整體內容並沒有發生改變。webpack 側...