Gulp應該和Grunt比較,他們的區別我就不說了,說說用處吧。Gulp / Grunt 是一種工具,能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情讓它幫你做了。
說到 browserify / webpack ,那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / requirejs 是一種類型,browserify / webpack 是另一種類型。
seajs / requirejs : 是一種在線"編譯" 模塊的方案,相當于在頁面上加載一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模塊化。
browserify / webpack : 是一個預編譯模塊的方案,相比于上面 ,這個方案更加智能。沒用過browserify,這里以webpack為例。首先,它是預編譯的,不需要在瀏覽器中加載解釋器。另外,你在本地直接寫JS,不管是 AMD / CMD / ES6 風格的模塊化,它都能認識,并且編譯成瀏覽器認識的JS。
這樣就知道,Gulp是一個工具,而webpack等等是模塊化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
不知道這樣夠清楚了么
Gulp、Grunt和Make(常見于c/cpp)、Ant、Maven、Gradle(Java/Android)、Rake、Thor(Ruby)一樣,都是是Task Runner。用來將一些繁瑣的task自動化并處理任務的依賴關系。
其中有些是基于配置描述的,描述邏輯比較費勁,比如Ant基于xml。還有些就是代碼,比較靈活,個人偏好這種。比如Rake、Thor、Gulp、Gradle。對于Gradle來說也有些蛋疼。因為它本身是Groovy的DSL。如果要深入使用,你還得學一下Groovy語言。其他就好多了Rake、Thor就是寫Ruby;Gulp就是JavaScript。相對門檻低很多。
模塊化解決方案:
BrowserifyIt provides a way to bundle CommonJS modules together, adheres to the Unix philosophy(小工具協作), is in fact a good alternative to Webpack.
Webpack?takes a more monolithic(整體解決、大而全) approach than Browserify... is relies on configuration.
webpack官網有對二者的使用方法進行對比,可以看一下:webpack for browserify users
上面這些工具在功能上有交集:代碼的Minify、Concat;資源預處理等;