What are the differences between Grunt, Gulp.js and Bower? Why & when to use them?

Question

What are the differences between Grunt, Gulp.js and Bower? Why & when and how to use them?

I\'ve seen nowadays, most of the front-end project using the above too

Answer 1

gulp and Grunt are task runners. They are different approaches to same problem. Grunt uses configuration based approach, while gulp uses streams from node to achieve result. You use them to define how and which tasks to execute (copying files, adding banners, replacing text, style checking, etc...). They are (usually) run from command line, manually.

For example, if copying and modifying files Grunt will create intermediate files and gulp will leverage node's streams and transform on the fly.

When to use Grunt or gulp is less specific answer because it takes into account personal preference, technology support (plugins for certain tasks), project specifics, and ease of configuration. Both are relatively easy to get up and running, but usually you will end up choosing one which has better plugins for technology stack used for your project (although both have good plugins support).

Bower is package manager. It's used to install javascript (mostly client side) packages (however npm - also packet manager - also contains almost all of those modules/packages. You use it to automatize dependency management and package installing.