In the industry of digital marketing, time is money. The faster tasks are completed the larger the profit at the end of the project. If you find yourself spending time repeating the same tasks over and over again – Grunt can certainly help take the weight off!
Grunt is an “automated task manager”, as the name suggests, it can do the “grunt” tasks for you while you get on with the more interesting stuff.
Every time you make a change to your Sass or CSS Grunt can recompile and minify everything for you without you having to lift a finger, simply refresh the browser and volia your changes are there. Inserted a new image? No problem! Grunt can compress the image down to save space and increase performance – all automatically.
So how do we go about installing and begin using grunt? Well firstly we need to install node.js, go to https://nodejs.org/ and run the installer there. Afterwards it’s surprisingly straight forward – just run the following command:
npm install -g grunt-cli
Note: Be sure to prepend the command with sudo if on Linux/Mac or run your command line in Administrator mode if you’re on Windows.
This will install Grunt’s command line interface globally allowing you to use “grunt” as a command in your terminal/cmd.
Now we need to create two files. Navigate to your project’s root folder and create a new json file named “package”, fill package.json with the following contents:
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}
Feel free to change the name and version parameters so they match your current project. Now we need to install the sass task and configure it. A quick google of “grunt sass” yields https://github.com/gruntjs/grunt-contrib-sass as a result. We’re going to stick with using tasks that are prefixed with “grunt-contrib” as these tasks have been released by the official Grunt team as opposed to third parties. A quick scan of the page reveals the command we need to run:
npm install grunt-contrib-sass --save-dev
Note: Be sure to prepend the command with sudo if on Linux/Mac or run your command line in Administrator mode if you’re on Windows.
Once you have run this command a new folder called “node_modules” will appear alongside package.json, this folder can be completely ignored (and shouldn’t be source controlled). It is where Grunt stores all of the tasks that can be run with that project.
Now the real fun begins, we’re going to use Grunt to compile our Sass into CSS. Create a new file and call it “gruntfile.js”, this is the real meat of Grunt, here we define the tasks we want to perform when certain criteria is met. Paste the following into the file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// We configure our Sass task here
sass: {
dist: {
files: {
// Change main.css to where you’d like the css to be outputted to including directories
// And change main.scss to the sass file to be compiled
'main.css': 'main.scss'
}
}
}
});
// We specify the tasks we need to load here
grunt.loadNpmTasks('grunt-contrib-sass');
// Here we define the tasks that grunt will run
// When “grunt” is entered into the terminal the “sass” task is executed
grunt.registerTask('default', ['sass']);
// When “grunt images” is run in the terminal the “imgmin” task is run
};
Now our hard work pays off, run
grunt sass
and our sass will be compiled!
While this is all very well and good, it did take us a while to set up, and doing this for each project would become tedious. But don’t worry, if you want to share your grunt tasks with others or simply reuse them on another project simply copy and paste package.json and gruntfile.js into your new directory and run:
npm install
Note: Be sure to prepend the command with sudo if on Linux/Mac or run your command line in Administrator mode if you’re on Windows.
And just like that all of our tasks (in this case just compiling sass) will be installed and ready to go, so once again we can just type
grunt sass
and our sass is compiled in our new project.
The nature of grunt having just two core files (package.json and gruntfile.js) which can easily be shared and reused makes them ideal candidates for source control.
However this is not an ideal set-up as we need to explicitly type “grunt sass” every time we want to compile, it serves as an introduction into task automation.
Grunt is a tool that can be as simple or as complex as you need it to be, in a future article we’ll delve into having Grunt watch specific files for changes and execute tasks based on which files have been changed. But for now, see what you can do with Grunt do to make your life easier.
