Grunt、Gulp區別 webpack、 requirejs區別

標籤：require   並且   多個   也有   外掛程式   抽象   導致   識別   用法   

1. 書寫方式

grunt 運用配置的思想來寫打包指令碼，一切皆配置，所以會出現比較多的配置項，諸如option,src,dest等等。而且不同的外掛程式可能會有自己擴充欄位，導致認知成本的提高，運用的時候要搞懂各種外掛程式的配置規則。
gulp 是用代碼方式來寫打包指令碼，並且代碼採用流式的寫法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch gulp.task等介面,運用相當簡單。經嘗試，使用gulp的代碼量能比grunt少一半左右。

2. 任務劃分

gulp是工具鏈、構建工具，可以配合各種外掛程式做js壓縮，css壓縮，less編譯 替代手工實現自動化工作

1.構建工具  :　   可以用構建基礎項目

2.自動化  :          可以通過gulp.task配置各介面自動對js,css,html代碼進行壓縮, 自動重新整理頁面( IDE好多已經可以自動重新整理了 )

3.提高效率用  :  可以編譯less文法,可認快速對css的編輯

webpack是檔案打包工具，可以把項目的各種js文、css檔案等打包合并成一個或多個檔案，主要用於模組化方案，先行編譯模組的方案

1.打包工具   :   gulp 也可以,但是需要按項目配置屬性項 ,  webpack 很整合了,簡單

2.模組化識別

3.編譯模組代碼方案用

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

• seajs / require : 是一種線上"編譯" 模組的方案，相當於在頁面上載入一個 CMD/AMD 解譯器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模組化。

 

• browserify / webpack : 是一個先行編譯模組的方案，相比於上面 ，這個方案更加智能。沒用過browserify，這裡以webpack為例。首先，它是先行編譯的，不需要在瀏覽器中載入解譯器。另外，你在本地直接寫JS，不管是 AMD / CMD / ES6 風格的模組化，它都能認識，並且編譯成瀏覽器認識的JS。這樣就知道，Gulp是一個工具，而webpack等等是模組化方案。Gulp也可以配置seajs、requirejs甚至webpack的外掛程式。

Grunt、Gulp區別 webpack、 requirejs區別