I already knew these tools for a while, but I never had the will to check what they really did. In fact, I had them on my favorites for quite some time, and I had never used them!

Why? Simple: I had a corporate job. When you're working for a big company, you stick with their methodologies, even if they're ancient!
I had to quit my job, get myself into freelancing to start learning new tools if I wanted to keep up with the big fish. But let's leave that for another blog post...

If you, like me until a few months before, have already heard about these tools but you don't know exactly what they do, then this is for you.
I'll tell you, in very simple words, what they do, how to install and use them, and after that you're going to slap yourself for never using these awesome tools before.

Like the title says, I'm only going to scratch the surface of what these tools can do for you, feel free to explore the documentation afterwards.

Grunt

"The JavaScript task runner" - this is what people see when they go to gruntjs.com, and for a first impression it doesn't say that much. Now that I know what it does, it makes sense, but back then it really didn't.

The best way to explain what Grunt does is to use an example.

When you're building an webapp, or a website, you'll probably have a CSS folder, where you store all your CSS files, like this:

index.html
page1.html
css
|__ main.css
|__ header.css
|__ footer.css
|__ foo.css
|__ bar.css

One of the things that Grunt can do for you is to grab all those files and concatenate them in one single file. This way, in your index.html, you don't have to grab all files inside the css folder, just grab the styles.css file!

index.html
page1.html
styles.css << the file with all your CSS code
css
|__ main.css
|__ header.css
|__ footer.css
|__ foo.css
|__ bar.css

Even if you add a new CSS file to your folder, the only thing you have to do is to run Grunt once again, and it will automaticaly add to your styles.css file.

This is just one of the many thing that Grunt can do for you. With Grunt you can also minify, compile, test, lint, and other tasks that doing by hand would be a nightmare!

Gulp

Gulp, like Grunt, is an automation tool. It does most of the stuff that Grunt does, but the main difference is how you configure a task. I'll give a simple example. This is how you tell Grunt to concatenate a bunch of files into one:

concat: {
  css: {
    src: 'css/*.css',
    dest: 'style.css'
  }
}

The same task for Gulp:

gulp.src('css/*.css').pipe(concat('style.css'));

One of the main differences with Gulp is that it has a stream-based build system, so if you want to minify your file after that, you just keep piping:

gulp.src('css/*.css')
  .pipe(concat('style.css'))
  .pipe(cssmin());

In Grunt you'll need to configure another task:

cssmin: {
  css:{
    src: 'style.css',
    dest: 'style.min.css'
  }
}

Gulp is a little bit easier to setup and learn, but both tools will get your job done.

Bower

I remember back in the old days, when we sometimes checked the jQuery website for a newer version, and had to download it, unzip and replace the files on our project, all by hand. Thankfully, we didn't use a lot of frameworks / libraries / utilities on your projects, because if we did, that would had gave me headaches!

Bower is here to do it all for you. Bower will install and update all the packages you need with a simple line command.

Want to add jQuery to your project? Just run this line on your terminal:

bower install jquery --save-dev

Note: I'll tell you how to install bower at the last section of this post.

All the files will be added to the folder bower_components / jquery. That's it! If there's a new version available, all you need to do is to run:

bower update

Easy!

Yeoman

The web's scaffolding tool for modern webapps.

Back then I didn't knew what scaffolding meant. So, just like Grunt, when I opened Yeoman's webpage my reaction was: "Meh."

Scaffolding, in programming language, it basically means to setup a file structure for your project. So instead of creating by hand all the folder you're going to need (css, js, ...), Yeoman will do it for you.

The first time I tried Yeoman was to start a new AngularJS project, so after installing it I went to the generators page, installed the angular generator, and with this single command

yo angular my-app-name

Yeoman created the app folder structure, alongside with the folders for the Bower components, Node modules and tests. Also, it automatically configured the Grunt and Bower files so I can use them from the start.

All is done accordingly the best pratices and using the best tools, giving you a kickstart so you can jump directly to the coding phase.

Instalation

These instructions are for Mac enviroments only. For Linux it won't change much, except for the Node instalation.

All these tools have the same dependency: Node

Homebrew

To install Node I recommend using Homebrew, so if you don't have that installed, now is a good time.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

After that, you need to add the Homebrew location to your $PATH:

export PATH="/usr/local/bin:$PATH"; source ~/.profile

And check if everything is fine by running:

brew doctor

Node

Cool! Now that you have Homebrew installed everything else is super easy. To install Node just type in your terminal:

brew install node

To test that node is properly installed run:

node -v

And you should get the version of Node in response.

Grunt, Gulp, Bower and Yeoman

To install all the tools I mentioned here, you will be using the Node Package Manager (NPM), and it will be very simple since all it's needed is a single command line.

Grunt:

npm install -g grunt-cli

If you prefer Gulp:

npm install -g gulp

Bower:

npm install -g bower

Yeoman:

npm install -g yo

And that's it! You're ready to rock!