Last Updated: February 25, 2016
· steveniseki

grunt basics

gruntjs is an awesome JavaScript task runner which is used for... well you guessed it running tasks. So lets get up and running with grunt.

<b>First install grunt</b>

npm install -g grunt-cli

<b>Now lets set up grunt for your project</b>

add the package.json and the your project


package.json is used to list grunt and the Grunt plugins your project needs as dependencies.

  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"


The Gruntfile is used to configure or define grunt tasks and load Grunt plugins. Here is an example for a calculator app Gruntfile:

module.exports = function (grunt) {
        meta: {
            banner: '/* my minified app */'
        min: {
            dist: {
                src: ['<banner>', 'calculator/*.js'],
                dest: ['calculator.min.js']
        watch: {
            files: ['calculator/*.js'],
            tasks: ['min']
    grunt.registerTask('default', [


In this Gruntfile, the min task, which can be run in the command line as grunt min, will minify all of your JavaScript files in the calculator/ folder into calculator.min.js.

We have also registered a grunt default task, so running grunt will run the default task. We could have set up a dist task as shown below.

grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

Okay so that is an example of what grunt can do for us, pretty nice... what other tasks can we add to our Gruntfile.js.

<b>How about compiling your coffeescript code into js</b>

// install the grunt plugin
npm install grunt-contrib-coffee --save-dev
// add this to your GruntFile, 

<b>or compiling your less code into css</b>

// install the grunt plugin
npm install grunt-contrib-less --save-dev
// add this to your GruntFile, 

<b> or optimizing require js files</b>

// install the grunt plugin
npm install grunt-contrib-requirejs --save-dev
// add this to your GruntFile, 

Yes, grunt can do all of those things. Each of these plugins will need to be configured in your Gruntfile via the grunt.initConfig method. More on configuring grunt plugins

<b>configuring your grunt less plugin is shown below</b>

less: {
  development: {
    options: {
      paths: ["assets/css"]
    files: {
      "path/to/result.css": "path/to/source.less"

<b>Learn how to configure some of your grunt plugins at</b>

less grunt plugin

coffeescript grunt plugin

requirejs grunt plugin