Search code examples
javascriptnpmgruntjsbowertooling

What are npm, bower, gulp, Yeoman, and grunt good for?

I'm a backend developer, and slightly confused by npm, bower, gulp, grunt, and Yeoman. Whenever I ask someone what their purpose is, the answer tends to boil down to dependency manager - for all of them. Surely, we don't need four different tools that all do the same?

Can someone please explain what each of these is good for in as few sentences as possible - if possible just one per tool, using language a five year old (with development skills) could understand?

For example:

  • SVN stores, manages, and keeps track of changes to our source code

I have used maven, Jenkins, nexus and ant in the past; maybe you could compare the tools above to these?

Also feel free to add other front-end tools to the list.

Here is what I have found out so far - not sure it's correct, though:

  • bower dependency manager for front-end development/JS libraries, uses a flat dependency list
  • npm dependency manager for node.js server, can resolve transitive dependencies/dependency trees
  • grunt runs tasks, much like Jenkins, but locality on the command line
  • Yeoman provided scaffolding, i.e skeleton projects
  • gulp same as grunt, but written in js only
  • node.js server for js apps?
  • git decentralized SCM/VCS, counterpart to svn/cvs

Am I close? :)

Solution

  • You are close! Welcome to JavaScript :)

    Let me give you a short description and one feature that most developers spend some time with.

    bower Focuses on packages that are used in the browser. Each bower install <packagename> points to exactly one file to be included for (more can be downloaded). Due to the success of webpack, browserify and babel it's mostly obsolete as a first class dependency manager.

    2018 Update: bower is mostly deprecated in favour of NPM

    npm Historically focuses on NodeJS code but has overthrown bower for browser modules. Don't let anyone fool you: NPM is huge. NPM also loads MANY files into your project and a fresh npm install is always a good reason to brew a new cup of coffee. NPM is easy to use but can break your app when changing environments due to the loose way of referencing versions and the arbitrariness of module publishing. Research Shrink Wrap and npm install --save-exact

    2018 Update: NPM grew up! Lot's of improvements regarding safety and reproducibility have been implemented.

    grunt Facilitates task automation. Gulps older and somewhat more sluggish brother. The JavaScript community used to hang out with him in 2014 a lot. Grunt is already considered legacy in some places but there is still a great amount of really powerful automation to be found. Configuration can be a nightmare for larger use-cases. There is a grunt module for that though.

    2018 Update: grunt is mostly obsolete. Easy to write webpack configurations have killed it.

    gulp Does the same thing as grunt but is faster.

    npm run-script You might not need task runners at all. NodeJS scripts are really easy to write so most use-cases allow for customizedtask-automation workflow. Run scripts from the context of your package.json file using npm run-script

    webpack Don't miss out on webpack. Especially if you feel lost on the many ways of writing JavaScript into coherent modular code. Webpack packages .js files into modules and does so splendidly. Webpack is highly extensible and offers a good development environment too: webpack-dev-server Use in conjunction with babel for the best possible JavaScript experience to date.

    Yeoman Scaffolding. Extremly valuable for teams with different backgrounds as it provides a controllable common ground for your projects architecture. There even is a scaffolding for scaffolds.