Introducing Grunt

When you’re developing a large-scale project you always want to use some kind of task runner, in order to automate your workflow.

Grunt is exactly that, a JavaScript task runner. It can prepare your code for production with one simple command.

What can Grunt do ?

Grunt is a JavaScript task runner and it’s able to compile your CoffeeScript, Less or Sass files , lint all your JavaScript, minify it or even put all of it in one file by concatenating them.

Grunt is an amazing automation tool that allows you to just sit back, focus on your programming and let Grunt do the rest when it comes to preparing for production.

Installing Grunt

The first thing you need to know is that Grunt runs on node and so you will need to have NodeJS and NPM installed on your machine. If you don’t already have them, there are some really simple ways to get both these things installed.

What you need to do is install grunt-cli globally:

npm install -g grunt-cli

Now you will need to start Grunt for your specific project in its directory:

npm init

After you run this you will be asked a couple of questions and you should answer according to your specific project because what this command does is create a package.json file in your directory that is needed in order to run Grunt and automate your tasks.

Now you will need to add Grunt and its plugins to an existing package.json file and the easiest way to do that is by running:

npm install grunt --save-dev

This will install Grunt and also save it as a devDependency and this is great if you are planning on passing on your project to someone else because this way they won’t have to download every single dependency separately.

Using Grunt

We now have Grunt installed on our machine and also on our specific project and this allows us to do Grunt tasks and but in order to do specific tasks like compile sass into css you will need some specific plugins and the one that handles this compilation is grunt-contrib-sass and to install it and add it to your developer dependencies you need to run:

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

Now we have the sass plugin installed we need to create a gruntfile.js and this file is where we will specify our tasks and just what we want Grunt to do exactly. In my case all I want it to do is is compile my styles.scss into a styles.css and for this our gruntfile.js will look something like this:

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

First have the wrapper function and this is the function where we place all our tasks and code, it always takes ‘grunt’ as a parameter.

After this we start to configure our file and our tasks, we first need to tell Grunt where our package.json is and since both of this files are on the same directory we just need to pass

package.json

with a function that tells Grunt to read the file.

After both these things are done it really depends on the plugin you are using and in this case with sass all we really need to pass is the files object. Here we place the file we want to compile and then the file to be compiled. Adding one more file would be as simple as copying the line and adding other file names that you may have.

In the final two lines we tell Grunt to load the tasks inside the sass plugin and also tell it to run the sass task we just created.

Now if you run

grunt

in the command line inside our project you can see that a new css file as been created and compiled from our style.scss. The problem with this is that every time we want Grunt to compile we will have to run the

grunt

command and that isn’t really what we want; what we want is for Grunt to watch the file and compile it automatically every time we make a change and for that we firstly need to install the watch plugin by running:

npm install grunt-contrib-watch —-save-dev

After this is installed we need to make a few changes to our gruntfile to get the watch plugin up and running:

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

And now all we need to do is run:

grunt watch

Now every time we make a change Grunt will know and it will recompile our files automatically so that everything is automated and we don’t need to do anything at all.

Conclusion

Helpers like Grunt aren’t for every project, but when working on a big project that needs to compile Sass, CoffeeScript and concatenate everything just before production, a helper like this can be a big time saver.

It’s definitely something worth popping into your projects.