What are the differences between Grunt, Gulp.js and Bower? Why & when to use them?
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
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."