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: 问题：

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? 有什么不同？
Where would you use browserify ? 您将在哪里使用browserify ？ Can't we do the same with node/ES6 imports? 我们不能对node / ES6导入做同样的事情吗？
When would you use gulp / grunt over npm + plugins? 您何时会在npm +插件上使用gulp / grunt ？
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

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3214997

标签

browserify

gulp

bower

Webpack