NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

webpack vs browserify
grunt vs npm
webpack vs npm
gulp and webpack
gulp vs yarn
webpack vs babel
webpack task runner
webpack tutorial

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:

  • npm & bower 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 webpack/gulp/grunt after fetching all the dependencies.
  • bower is like npm, but builds a flattened dependency trees (unlike npm which does it recursively). Meaning npm fetches the dependencies for each dependency (may fetch the same a few times), while bower expects you to manually include sub-dependencies. Sometimes bower and npm are used together for front-end and back-end respectively (since each megabyte might matter in front-end).
  • grunt and gulp are task runners to automate everything that can be automated (i.e. compile CSS/Sass, optimize images, make a bundle and minify/transpile it).
  • grunt vs. gulp (is like maven vs. gradle 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.
  • 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.
  • npm/bower + plugins may replace task runners. Their abilities often intersect so there are different implications if you need to use gulp/grunt over npm + 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").
  • browserify allows packaging node modules for browsers. browserify vs node's require is actually AMD vs CommonJS.

Questions:

  1. What is 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? Can't we do the same with node/ES6 imports?
  3. When would you use gulp/grunt over npm + plugins?
  4. Please provide examples when you need to use a combination
Webpack and Browserify

Webpack and Browserify do pretty much the same job, which is processing your code to be used in a target environment (mainly browser, though you can target other environments like Node). Result of such processing is one or more bundles - assembled scripts suitable for targeted environment.

For example, let's say you wrote an ES6 code divided into modules and want be able to run it in browser. If those modules are Node modules, browser won't understand them since they exist only in Node environment. ES6 modules also won't work in older browsers like IE11. Moreover you might have used experimental language features (ES next proposals) that browsers don't implement yet so running such script would just throw errors. Those tools like Webpack and Browserify solve these problems by translating such code to a form browser is able to execute. On top of that, they make it possible to apply a huge variety of optimisations on those bundles.

However, Webpack and Browserify differ in many ways, Webpack offers many tools by default (e.g. code splitting), while Browserify can do this only after downloading plugins but using both leads to very similar results. It comes down to personal preference (Webpack is trendier). Btw, Webpack is not a task runner, it is just processor of your files (it processes them by so called loaders and plugins) and it can be run (among other ways) by a task runner.


Webpack Dev Server

Webpack Dev Server provides similar solution to Browsersync - a development server where you can deploy your app rapidly as you are working on it, and verify your development progress immediately with the dev server automatically refreshing the browser on code changes or even propagating changed code to browser without reloading with so called hot module replacement.


Task runners vs NPM scripts

I've been using Gulp for its conciseness and easy task writing, but have later found out I need neither Gulp nor Grunt at all. Everything I have ever needed could have been done using NPM scripts to run 3rd-party tools through their API. Choosing between Gulp, Grunt or NPM scripts depends on taste and experience of your team.

While tasks in Gulp or Grunt are easy to read even for people not so familiar with JS, it is yet another tool to require and learn and I personally prefer to narrow my dependencies and make things simple. On the other hand, replacing these tasks with the combination of NPM scripts and (propably JS) scripts which run those 3rd party tools (eg. Node script configuring and running rimraf for cleaning purposes) might be more challenging. But in the majority of cases, those three are equal in terms of results.


Examples

As for the examples, I suggest you have a look at this React starter project, which shows you a nice combination of NPM and JS scripts covering the whole build and deploy process. You can find those NPM scripts in package.json in the root folder, in a property named scripts. There you will mostly encounter commands like babel-node tools/run start. Babel-node is a CLI tool (not meant for production use), which at first compiles ES6 file tools/run (run.js file located in tools) - basically a runner utility. This runner takes a function as an argument and executes it, which in this case is start - another utility (start.js) responsible for bundling source files (both client and server) and starting the application and development server (the dev server will be probably either Webpack Dev Server or Browsersync).

Speaking more precisely, start.js creates both client and server side bundles, starts express server and after successful start inits Browser-sync, which at the time of writing looked like this (please refer to react starter project for the newest code).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

The important part is proxy.target, where they set server address they want to proxy, which could be http://localhost:3000, and Browsersync starts a server listening on http://localhost:3001, where the generated assets are served with automatic change detection and hot module replacement. As you can see, there is another configuration property files with individual files or patterns Browser-sync watches for changes and reloads the browser if some occur, but as the comment says, Webpack takes care of watching js sources by itself with HMR, so they cooperate there.

Now I don't have any equivalent example of such Grunt or Gulp configuration, but with Gulp (and somewhat similarly with Grunt) you would write individual tasks in gulpfile.js like

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

where you would be doing essentially pretty much the same things as in the starter-kit, this time with task runner, which solves some problems for you, but presents its own issues and some difficulties during learning the usage, and as I say, the more dependencies you have, the more can go wrong. And that is the reason I like to get rid of such tools.

Webpack vs Gulp vs Grunt vs Browserify: Choosing the Best Tool to , You'll get a comprehensive comparison of Gulp vs Grunt task runners as well as Browserify vs  Here we compare between browserify, grunt, gulp and webpack. In this comparison we will focus on the latest versions of those packages. The current versions are browserify 16.5.1, grunt 1.1.0, gulp 4.0.2 and webpack 4.43.0. browserify, browser-side require() the node way.

Grunt vs gulp vs Webpack, Grunt - The JavaScript Task Runner. gulp - The streaming build system. Webpack vs Gulp vs Grunt being said, we have been migrating away from Atmosphere package manager towards NPM. Bower is a package manager for the web. There is absolutely no difference between them whatsoever. These are all searchable in DuckDuckGo (some people prefer Google you may also try that) Anyway, I would like to contribute something here since I love these packages but you really need t

OK, they all have got some similarities, they do the same things for you in different and similar ways, I divide them in 3 main groups as below:


1) Module bundlers

webpack and browserify as popular ones, work like task runners but with more flexibility, aslo it will bundle everything together as your setting, so you can point to the result as bundle.js for example in one single file including the CSS and Javascript, for more details of each, look at the details below:

webpack

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.

This document is intended to give a high-level overview of these concepts, while providing links to detailed concept specific use-cases.

more here

browserify

Browserify is a development tool that allows us to write node.js-style modules that compile for use in the browser. Just like node, we write our modules in separate files, exporting external methods and properties using the module.exports and exports variables. We can even require other modules using the require function, and if we omit the relative path it’ll resolve to the module in the node_modules directory.

more here


2) Task runners

gulp and grunt are task runners, basically what they do, creating tasks and run them whenever you want, for example you install a plugin to minify your CSS and then run it each time to do minifying, more details about each:

gulp

gulp.js is an open-source JavaScript toolkit by Fractal Innovations and the open source community at GitHub, used as a streaming build system in front-end web development. It is a task runner built on Node.js and Node Package Manager (npm), used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization etc. gulp uses a code-over-configuration approach to define its tasks and relies on its small, single-purposed plugins to carry them out. gulp ecosystem has 1000+ such plugins made available to choose from.

more here

grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequently used tasks such as minification, compilation, unit testing, linting, etc. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt was created by Ben Alman and is written in Node.js. It is distributed via npm. Presently, there are more than five thousand plugins available in the Grunt ecosystem.

more here


3) Package managers

package managers, what they do is managing plugins you need in your application and install them for you through github etc using package.json, very handy to update you modules, install them and sharing your app across, more details for each:

npm

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.

more here

bower

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies. To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

more here

and the most recent package manager that shouldn't be missed, it's young and fast in real work environment compare to npm which I was mostly using before, for reinstalling modules, it do double checks the node_modules folder to check the existence of the module, also seems installing the modules takes less time:

yarn

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Yarn allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back, and when the problem is fixed, you can use Yarn to keep it all up to date.

Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.

more here


Bower vs gulp, What are some alternatives to Bower and gulp? npm. npm is the command-line interface to the npm ecosystem. It is battle-  Here we compare between bower, browserify, ejs, grunt and handlebars. In this comparison we will focus on the latest versions of those packages. The current versions are bower 1.8.8, browserify 16.5.1, ejs 3.1.3, grunt 1.1.0 and handlebars 4.7.6. bower, The browser package manager. It was authored by Twitter on Sep, 2012.

You can find some technical comparison on npmcompare

Comparing browserify vs. grunt vs. gulp vs. webpack

As you can see webpack is very well maintained with a new version coming out every 4 days on average. But Gulp seems to have the biggest community of them all (with over 20K stars on Github) Grunt seems a bit neglected (compared to the others)

So if need to choose one over the other i would go with Gulp

Gulp vs Grunt vs Webpack: Comparison of Build Tools / Task , Gulp vs Grunt is the most popular dilemma. So how can Gulp vs Grunt vs Webpack be compared? gulpjs / gulp, gruntjs / grunt, Weekly downloads (npm) are lots of other alternatives, like Browserify, JSPM or Brunch, just  webpack is also able to use provide hot module reloading, which gives you an opportunity to re-render your app in a browser faster. Of course, Browsery also supports this function, but webpack has a better hang of it. Gulp vs Grunt vs webpack vs Browserify. It’s obvious that webpack is the most popular tool for JavaScript app development. As

A small note about npm: npm3 tries install dependencies in a flat way

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack, gulp (is like maven vs. gradle or configuration vs. code). Grunt is based on configuring separate independent tasks, each  Here we compare between angular2, bower, browserify, ejs and gulp. In this comparison we will focus on the latest versions of those packages. The current versions are angular2 2.0.0-beta.21, bower 1.8.8, browserify 16.5.1, ejs 3.1.2 and gulp 4.0.2. angular2, Angular 2 - a web framework for modern web apps. It was authored on Feb, 2015.

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack, Webpack and Browserify do almost the same job that combines your modules that will be used in a browser  Community: Webpack vs Gulp vs Grunt vs Browserify As you can see in the table below, Webpack is much more popular than other build tools for JS software development. Webpack has 42,784 Github stars that are a far greater number than even its close competitor Gulp has (only 29,982 stars) .

Which Should You Use: Webpack or Browserify & Gulp?, Development vs Production Builds. if (argv.prod) { process.env.NODE_ENV = '​production'; } let PROD =  Here we compare between bower, browserify, jspm, rollup and webpack. In this comparison we will focus on the latest versions of those packages. The current versions are bower 1.8.8, browserify 16.5.1, jspm 2.0.0-beta.7, rollup 2.10.5 and webpack 4.43.0. bower, The browser package manager. It was authored by Twitter on Sep, 2012.

What are the differences between NPM, Bower, Grunt, Gulp , See Some Useful Links Below -; Grunt vs Gulp · What is Gulp and Grunt · What is Bower And Why To Use Browserify is great at packaging node.js modules for browsers. Gulp vs Grunt vs Webpack. Here we compare between angular2, bower, browserify, ejs and grunt. In this comparison we will focus on the latest versions of those packages. The current versions are angular2 2.0.0-beta.21, bower 1.8.8, browserify 16.5.1, ejs 3.1.2 and grunt 1.1.0. angular2, Angular 2 - a web framework for modern web apps. It was authored on Feb, 2015.

Comments
  • time to add in rollup? 😝
  • this is a very reasonable question. pseudo web-devs like me stumble over all the packages that are implemented in a weekly fashion..
  • hackernoon.com/…
  • @Fisherman I'm totally new to this, and it seems completely nuts...
  • @Fisherman The "recommended" comment I just read was even worse! D: I just want to build a fricking static page that uses a couple of CSS/JS libs, and would benefit from having a tool that can compile that together... Throw in some templating engine to give some rest to my Ctrl-C/Ctrl-V fingers, and that'd be perfect... And yet, hours into it, still trying to find a way to go...
  • great answer! May you describe pls in which way webpack/browserify manage reuse node modules at browser please?
  • Webpack assembles dependencies (exported module values) into object (installedModules). Each module is therefore property of that object and name of such property represents its id (eg. 1, 2, 3 ... etc.). Everytime you require such module in your source, webpack transforms the value into function call with module id in argument (eg. __webpack_require__(1)), which returns the right dependency based on search in installedModules by module id. I'm not sure, how Browserify handles it.
  • @Dan Skočdopole Can you elaborate more?
  • I don´t agree with presenting basic usage of gulp or grunt, these two are easy to compare using google, webpack-dev-server requires to understand webpack first, and that is out of scope of this question / answer, but I have presented some Browsersync config. You are right with the starter-kit, and I elaborated on it more.
  • +1 for reducing dependencies to keep things simple rather than following the (more) popular opinion that every new package must be used!
  • Is there a list of gulp plugins ? are there really 1000+? npm only returns 20 or so?
  • Great summary. Should be an entry point for any discussion about a modern web development.
  • @flurbius Yes, here: gulpjs.com/plugins. Currently there seems to be 3,465 Gulp plugins.
  • webpack is now 26k starts on Github and gulp with 25.7k. Can't use the popularity factor to decide anymore ...
  • npm2 offers dedupe option to do the same thing