Install Grunt JS on a Mac – Tutorial

Before you install Grunt.js you will need to have node.js installed. For this tutorial I have node.js v0.10.0 installed.

I will be installing Grunt.js v0.4.1. WARNING if you have Grunt.j 0.3.x or less you will need to uninstall it first.

Grunt’s command line interface (CLI)

To get grunt.js installed we need to first install Grunt’s command line interface (CLI) globally. Current version is 1.0.6. Open Terminal and put in the command below:

npm install grunt-cli -g

You may get an error that says “Please try running this command again as root/Administrator.” You will need to put sudo before you command.

sudo npm install grunt-cli -g

This will put the grunt command in your system path, allowing it to be run from any directory.

Mac Tip – Open Terminal from Folder

  1. If you have the Terminal icon on your Dock you can drag the folder to the Terminal icon and it will open to that folder path.

Folder and Package JSON Setup

Now we need to install Grunt.js. With Terminal navigate to our project folder. I like to put all my build files into a folder called “_build”. So for this example the path is “/Users/codebelt/Desktop/project/_build”.

There are a few different ways to get Grunt.js and other plugins installed but I will be showing you the easiest way (I think). We need to create a “package.json” and put it in our “_build” folder. Copy and past code below and put in the “package.json”

{
  "name": "Test-Project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.1.3"
  }
}

When the next command below is ran it will install grunt v0.4.1 and the grunt plugin concat v0.1.3 into the “_build” folder.

Here is the command:

sudo npm install

Grunt File Setup

Now Grunt.js and the Concat plugin should be installed. Now we need to add a Grunt file to configure and build our project. Create a “Gruntfile.js” file inside the “_build” folder and paste in the code below.

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({

        //Read the package.json (optional)
        pkg: grunt.file.readJSON('package.json'),

        // Metadata.
        meta: {
            basePath: '../',
            srcPath: '../src/',
            deployPath: '../deploy/'
        },

        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
                '* Copyright (c) <%= grunt.template.today("yyyy") %> ',

        // Task configuration.
        concat: {
            options: {
                stripBanners: true
            },
            dist: {
                src: ['<%= meta.srcPath %>scripts/fileone.js', '<%= meta.srcPath %>scripts/filetwo.js'],
                dest: '<%= meta.deployPath %>scripts/app.js'
            }
        }
    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-concat');

    // Default task
    grunt.registerTask('default', ['concat']);

};

If you look you can see I have created a fileone.js and filetwo.js file and placed them into the ../src/scripts directory. This GruntJS script will take those files and export into the ../deploy/scripts folder as app.js. I am using <%= meta.srcPath %> as a constant or base path to my src folder. This allows me to change the base path in one location than having it hard coded all over the Gruntfile.

Now type “grunt” into Terminal and watch the magic happen.

grunt

That will run the Default task and concatenate the two js files into one. Try it out, I hope this works for you. You should see the output in Terminal say:

Running "concat:dist" (concat) task
File "../deploy/scripts/app.js" created.

Done, without errors.

You can download the example files for this tutorial here:

5 Responses to “Install Grunt JS on a Mac – Tutorial”

  1. Awesome you made my day thanks!

  2. Great tutorial, also note that on windows you will need to install the grunt-cli and execute grunt using grunt.cmd

    $ npm install -g grunt-cli
    $ grunt.cmd

  3. Thanks for this! I spent a whole day trying to make sense of using grunt to concatenate and minify my .js and .css files. I was about to give up and ran across this. I now understand and it finally makes sense now.

Leave a Reply