Getting started with Grunt and Sass

There are a lot of new tools out there to help speed up and streamline your workflow as a developer, and to be honest they can seem a bit daunting to get into. Two new tools I have started using this year were Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor that lets you write more powerful css, with the use of variables, mixins/functions and nesting! Lets take a look at getting started using Grunt to compile our Sass.

If you are new to the working in the command line, check my quick overview of some of the basic commands to help get you started.

Dependencies

To get started you will need to install a few things. Ruby to get Sass, and NodeJs to get npm, so we can work with Grunt.

If you are using windows you will have to install Ruby, the Ruby Installer is pretty painless, be sure to check the “Add Ruby executable to your PATH” option. The first time I tried this on a windows machine, I left that alone and could not get it running.

You will also need to grab and install NodeJs, this is pretty straight forward. And instructions for installing both of theses can be found on their sites.

Grunt

Getting started with grunt is pretty simple. You will of course need to install it first. The Grunt site is a great place to get information on installing Grunt if you need more information. But I will just show you that once you have Node install properly you simply run:

npm install -g grunt-cli

This installs the Grunt commandline interface globally to your machine so that you can access it.

Once this is setup there are a few ways to get started.

Option 1:
Using the commandline cd into your projects root directory. If you have an existing project and package.json you can simply run npm install and all the dependencies will be installed.

Option 2:
Lets assume you are starting fresh, running npm init on the commandline from your project root will set up only the package.json file for you.

Option: 3
Or you can set up your own package.json file. Here is a simple example:

{
  "name": "Project Name",
  "version": "0.0.1",
  "devDependencies": {
     //installed packages will go in here
  }
}

For both options 2 and 3 you will need run npm install grunt --save-dev and grunt will be added to your devDependencies in the pacakge.json file. The --save-dev flag saves grunt into your package.json file, this way you can share this file and have everyone on the project using the same dependencies.

More information about the package.json file can be found here.

If you ran npm init, you will need to install grunt and then a few other packages. grunt-contrib-sass, grunt-contrib-watch.

To do this run the command npm install <package> --save-dev. Where <package> is what you need to add. Example npm install grunt-contrib-sass --save-dev

grunt-contrib-sass: This task is pretty straight forward. It is used to actually compile your scss files to css.

grunt-contrib-watch: This is a task that you can run, so that we can watch our folder, whenever a file changes we can configure this task to run other tasks, say compile our Sass files.

Your package.json should now look something like this:

"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4"
}

The other thing that grunt requires, which, is really what does all the work, is the Gruntfile.js. In this file you set up all of your tasks that you will run.

Example:

module.exports = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		sass: {
			dist: {
				files: {
					'style/style.css' : 'sass/style.scss'
				}
			}
		},
		watch: {
			css: {
				files: '**/*.scss',
				tasks: ['sass']
			}
		}
	});
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default',['watch']);
}

This file starts with a wrapper function and we pass in grunt so that we can access it.

Then you set up the initConfig method for Grunt. In there you set up all your tasks and options for these task. Documentation for the tasks can be found with a simple google search that will usually result in a GitHub page.

Once you have your tasks set up you need to load these. Which is as simple as adding grunt.loadNpmTasks('*Task Name Here*').

We then can register tasks. Do so by adding grunt.registerTask('default',['*tasks you want to run*']); , the 'default' task is what gets run when you type grunt in the commandline, as you can see you also set an array of tasks you want to run when this is done, ['sass','jshint','uglify'].

You can actually set up many tasks, say you want to just have a build step for when you are developing rather then the build step you would use when you publish.

grunt.registerTask('dev',['sass','jshint']);

Running grunt dev will run theses tasks for you.

You may also just call tasks that are in your initConfig. In this case we will just run grunt sass. In your commandline and it will compile your scss to css.

Sass

I will not go into much detail about Sass as there are a ton of great starter posts out there for it. But now that we have our Grunt tasks set up we can simply run grunt from the commandline and go about authoring our Sass and have it compile to Css as we write.

Now why use Grunt over just the standard sass --watch style.scss:style.css way of doing it? Grunt has many more tasks that you can start using and integrating into your workflow, containing that whole process within one tool is pretty powerful.

If you are looking to use compass for you sass, take a look at another post I have, Adding Compass to our Grunt task. If you got this stuff figured out, using compass for you sass should be a snap.

UPDATE:
I just released an article on Getting started with Gulp and Sass if you are interested with an different workflow when it comes to compiling sass.