NPM，Bower，Browserify，Gulp，Grunt，Webpack

問題：

I'm trying to summarize my knowledge about the most popular JavaScript package managers, bundlers, and task runners. 我試圖總結我對最流行的JavaScript包管理器，捆綁器和任務運行器的瞭解。 Please correct me if I'm wrong: 若是我錯了，請糾正我：

• npm & bower are package managers. npm和bower是程序包管理器。 They just download the dependencies and don't know how to build projects on their own. 他們只是下載依賴項，而不知道如何自行構建項目。 What they know is to call webpack / gulp / grunt after fetching all the dependencies. 他們知道什麼是調用webpack / gulp / grunt獲取全部的依賴後。
• bower is like npm , but builds flattened dependencies trees (unlike npm which do it recursively). bower就像npm同樣，可是創建了扁平的依賴關係樹（不像npm那樣遞歸地執行）。 Meaning npm fetches the dependencies for each dependency (may fetch the same a few times), while bower expects you to manually include sub-dependencies. 意思是npm獲取每一個依賴關係的依賴關係（可能會獲取相同的幾回），而bower但願您手動包括子依賴關係。 Sometimes bower and npm are used together for front-end and back-end respectively (since each megabyte might matter on front-end). 有時， bower和npm分別用於前端和後端（由於每一個兆字節在前端可能很重要）。
• grunt and gulp are task runners to automate everything that can be automated (ie compile CSS/Sass, optimize images, make a bundle and minify/transpile it). grunt和gulp是使全部能夠自動化的工做自動化的任務執行者（即，編譯CSS / Sass，優化圖像，製做捆綁包以及縮小/翻譯它）。
• grunt vs. gulp (is like maven vs. gradle or configuration vs. code). grunt與gulp （就像是maven與gradle或配置與代碼）。 Grunt is based on configuring separate independent tasks, each task opens/handles/closes file. Grunt基於配置單獨的獨立任務，每一個任務打開/處理/關閉文件。 Gulp requires less amount of code and is based on Node streams, which allows it to build pipe chains (w/o reopening the same file) and makes it faster. Gulp須要較少的代碼量，而且基於Node流，這使其能夠構建管道鏈（無需從新打開同一文件）並使其更快。
• webpack ( webpack-dev-server ) - for me it's a task runner with hot reloading of changes which allows you to forget about all JS/CSS watchers. webpack （ webpack-dev-server ）-對我來講，這是一個任務執行程序，它具備對更改進行熱加載的功能，使您webpack webpack-dev-server全部JS / CSS監視程序。
• npm / bower + plugins may replace task runners. npm / bower +插件能夠代替任務運行器。 Their abilities often intersect so there are different implications if you need to use gulp / grunt over npm + plugins. 它們的能力常常相交，所以若是您須要在npm +插件上使用gulp / grunt ，則會有不一樣的含義。 But task runners are definitely better for complex tasks (eg "on each build create bundle, transpile from ES6 to ES5, run it at all browsers emulators, make screenshots and deploy to dropbox through ftp"). 可是任務運行者絕對適合複雜任務（例如「在每一個構建中建立捆綁包，從ES6移植到ES5，在全部瀏覽器模擬器上運行它，製做屏幕截圖並經過ftp部署到保管箱」）。
• browserify allows packaging node modules for browsers. browserify容許打包瀏覽器的節點模塊。 browserify vs node 's require is actually AMD vs CommonJS . browserify vs node的require其實是AMD vs CommonJS 。

Questions: 問題：

1. What is webpack & webpack-dev-server ? 什麼是webpack ＆ webpack-dev-server ？ Official documentation says it's a module bundler but for me it's just a task runner. 官方文檔說這是一個模塊捆綁器，但對我來講只是一個任務運行器。 What's the difference? 有什麼不一樣？
2. Where would you use browserify ? 您將在哪裏使用browserify ？ Can't we do the same with node/ES6 imports? 咱們不能對node / ES6導入作一樣的事情嗎？
3. When would you use gulp / grunt over npm + plugins? 您什麼時候會在npm +插件上使用gulp / grunt ？
4. Please provide examples when you need to use a combination 當您須要組合使用時，請提供示例

---

解決方案：

參考一： https://stackoom.com/question/2N7Rs/NPM-Bower-Browserify-Gulp-Grunt-Webpack
參考二： https://oldbug.net/q/2N7Rs/NPM-vs-Bower-vs-Browserify-vs-Gulp-vs-Grunt-vs-Webpack