Grunt is an automation tool powered by NodeJS. It works with plugins and allows you to automate the execution of development tasks such as minification, Sass/LESS to CSS, merging of files and those other repetitive tasks you perform during development.
Earlier versions of grunt came with built in functionality however with recent versions such as the one used here (0.4.1) you will have to install plugins for each individual function you wish to perform.
First we will have to install grunt-cli. This lets us run grunt from the command line.
To install it globally and ensure grunt and grunt-cli are available to all your projects add the -g flag.
npm install -g grunt-cli grunt
Once this is done, we’re ready to set up Grunt for our new local project.
Getting Started with Grunt
To set up Grunt on a local project, we’ll need create two new files.
1) package.json, which contains the standard project configuration and dependencies. 2) Gruntfile.js, which contains the configuration for Grunt.
This Gruntfile shows a very basic implementation that performs a single task. It includes the function called uglify and is configured to read all the files from the folder js/dev/ then minify and join them into one file at js/app.js.
Once we’ve saved both files we can install the dependencies using
Grunt and all of it’s dependencies are now installed.
To run this grunt uglify function type:
Voila! All the files in the js/dev folder have now been minified into a single file at js/app.js
There are many complex functions you can chain and automate to make your build process a lot easier.
Take a look at the Grunt Plugins page to see an extensive list of operations that can be automated.