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 tools, though I am using them like in my recent project I am using gulp to build HTML, CSS and JavaScript using a script like

$ gulp build 

but don't have much understanding of all these front-end frameworks, please help me get an overall understanding of Grunt, Gulp.js and Bower.

Answer 1

In essence and with a lot of hand-waving away of details, Gulp and Grunt are both systems for automating serieses of inter-dependent tasks, commonly used for defining the "build" of your project, like a modern take on the make tool. Typically a project uses one of them or the other, but not both at the same time (for the same parts, anyway).

Bower is different, and frequently used with either Gulp or Grunt: It's a package manager for client-side libraries, making it easy to keep those libs up to date, specify them and their dependencies in a standardized way, and so forth.

The Gulp one-liner from their website:

Automate and enhance your workflow

The Grunt one-liner from theirs:

The JavaScript Task Runner

And Bower:

A package manager for the web

---

Why & when to use them?

I think the above covers that for Gulp and Grunt: If you have tasks you want to automate (like building the release version of a website with minification, concatenation, compression, etc.; or watching files for changes and re-running tasks when they change to support rapid development), you can use Gulp and Grunt for that.

But it's not just builds. You can use Gulp and Grunt for any series of tasks that you need to automate.

Bower is useful for managing the client-side libraries in your projects. You can use Bower to install, say, the latest version of Bootstrap, and it will put the relevant files in standard locations in your project. Bower can update those files if a newer Bootstrap comes out. If a library depends on other libraries (Bootstrap's JS relies on jQuery, for instance), Bower helps manage that tree. There are helpful tasks for Grunt (and I assume for Gulp) that can even automate adding the script and link tags to your HTML for those libraries, by having a placeholder in your source HTML that basically says "put the Bower libs here."

Answer 2

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.