title: NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack
body: <p>I'm trying to summarize my knowledge about the most popular JavaScript package managers, bundlers, and task runners. Please correct me if I'm wrong:</p>
  
  <ul>
  <li><code>npm</code> &amp; <code>bower</code> are package managers. They just download the dependencies and don't know how to build projects on their own. What they know is to call <code>webpack</code>/<code>gulp</code>/<code>grunt</code> after fetching all the dependencies.</li>
  <li><code>bower</code> is like <code>npm</code>, but builds a flattened dependency trees (unlike <code>npm</code> which does it recursively). Meaning <code>npm</code> fetches the dependencies for each dependency (may fetch the same a few times), while <code>bower</code> expects you to manually include sub-dependencies. Sometimes <code>bower</code> and <code>npm</code> are used together for front-end and back-end respectively (since each megabyte might matter in front-end).</li>
  <li><code>grunt</code> and <code>gulp</code> are task runners to automate everything that can be automated (i.e. compile CSS/Sass, optimize images, make a bundle and minify/transpile it).</li>
  <li><code>grunt</code> vs. <code>gulp</code> (is like <code>maven</code> vs. <code>gradle</code> or configuration vs. code). Grunt is based on configuring separate independent tasks, each task opens/handles/closes file. 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. </li>
  <li><code>webpack</code> (<code>webpack-dev-server</code>) - for me it's a task runner with hot reloading of changes which allows you to forget about all JS/CSS watchers. </li>
  <li><code>npm</code>/<code>bower</code> + plugins may replace task runners. Their abilities often intersect so there are different implications if you need to use <code>gulp</code>/<code>grunt</code> over <code>npm</code> + plugins. But task runners are definitely better for complex tasks (e.g. "on each build create bundle, transpile from ES6 to ES5, run it at all browsers emulators, make screenshots and deploy to dropbox through ftp").</li>
  <li><code>browserify</code> allows packaging node modules for browsers. <code>browserify</code> vs <code>node</code>'s <code>require</code> is actually <a href="https://addyosmani.com/writing-modular-js/" rel="noreferrer">AMD vs CommonJS</a>.</li>
  </ul>
  
  <p><strong><em>Questions:</em></strong></p>
  
  <ol>
  <li><em>What is <code>webpack</code> &amp; <code>webpack-dev-server</code>?</em> Official documentation says it's a module bundler but for me it's just a task runner. <em>What's the difference?</em></li>
  <li><em>Where would you use <code>browserify</code>? Can't we do the same with node/ES6 imports?</em> </li>
  <li><em>When would you use <code>gulp</code>/<code>grunt</code> over <code>npm</code> + plugins?</em></li>
  <li><em>Please provide examples when you need to use a combination</em></li>
  </ol>