Building apps with Yeoman part I: Grunt.

Yeoman is a collection of three tools incorporated into a workflow. Those three tools are grunt, bower, and yo. Grunt is a build tool ( don't worry, we'll cover this more later ), bower is a package manager ( think npm for non-node stuff ) and yo is a scaffolding framework. Each of these tools offers immense power so let's dive in deeper.

Grunt: Saving you from the grunt work.

So grunt does all of the stuff you don't want to have to do every time you save a file or prep a deployment. What do I mean by that? As an example, in modern development we have some cool tools like SASS, CoffeeScript, or Jasmine.

Let's imagine a scenario, you're writing a web app or a site with some nifty features and you have to test your JavaScript, you want to preprocess your css with SASS or maybe use some Jade. This means you have to use the sass gem, or the CoffeeScript utility or some tool to compile your Jade. We could do this with codekit, or with each utility individually, but that's a pain.

Each time you start your work you have to start each of these programs. You have to manually configure stuff for each project, talk about a pain in the butt.

This is where grunt comes in. It handles all these task for you instantly behind the scences. It even will reload your browser automagically. What else can it do? A ton. It can check your JavaScript for errors or poor formatting, let you use any number of tools and packages, and automate things. Want to know how to set it up? Read on!!

The setup

You can head over to here and read the docs. The process is not that bad.
Here are the steps:

1) Install the grunt command line tool. ( this is installed global ). Do this by typing:

npm install -g grunt-cli  

2) You need to install the grunt tool itself. To do this we will make our package.json file by typing:

npm init  

Then fill out the prompts. Make sure the name fits js naming convention standards.

Next we install grunt and save it to our dependency file by typing:

npm install grunt --save-dev  

** this needs to be local to each project so don't add the -g flag

In many cases when using npm it is needed to run it as root user by preceding the command with sudo.

3) Pick out some stuff that you want it to handle for you and install it. You can get a list of the most common grunt packages here. Once you find a cool toy you install it like before:

npm install grunt-contrib-sass --save-dev  

The name of the package is the name you type for npm. Again this package, like the grunt tool itself should be local because each project is different and has different needs.

Don't fret though, you can save you package.json file and quickly prep another project again with a simple, quick npm install command. So let's say we just installed that sass package. What's next?

4) We configure the package in grunt.
Look for the grunt.initConfig line. Right under it type:

sass: {  
    dev: {                          
          options: {
            style: 'expanded',
            debugInfo: false,
            lineNumbers: true,
            noCache: true
          },
          expand: true,
          cwd: './public/sass',       
          src: ['*.scss'],            
          dest: 'public/css/',        
          ext: '.css'
    }
}

You can read about it's options on the grunt-contrib-sass github repo. Maybe i'll update this more later.

5) Lastly, you need to register this as a task that grunt will perform via:

//This preps the task to be run
grunt.loadNpmTasks('grunt-contrib-sass');

//This tells grunt when to run the task.
grunt.registerTask('dev', ['sass']);  
grunt.registerTask('default', ['dev']);  

Now to compile SASS with grunt you can run:
grunt dev or since we set dev to run as the default task we can just type grunt.

Note: This will only compile sass files when you run the grunt task. It doesn't watch the file system. To do that you install the watch package.

That was a lot of work to compile SASS.

True, but there are a few reasons why this is the best approach by clear and wide.

  1. What happens when you need to optimize images, concatenate scripts, minify files, compile CoffeeScript, run tests and more? 1 file you always use will be super helpful.

  2. You only make this once and then you use it for years.

So to conclude, invest 30 min up front and never have to worry about this stuff again and have a prove, time saving, tested methodology for doing your everyday tasks with projects.

More info on Yeoman

And another link