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