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:

11 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.

  4. I was initially getting frustrated with having to add sudo along with the appropriate password whenever I attempted to do an npm install which goes hand in hand with Grunt. However I found a good article on StackOverflow which helped me out a great deal. I’m not a confident command line user yet however I was able to change the permissions using the following commands:

    sudo chown -R `whoami` ~/.npm

    This basically changes recursively the ownership of the folder so that non root administrators dont need permission to access it.

    You may also need this

    sudo chown -R `whoami` /usr/local/lib/node_modules

    It stopped the pesky sudo need from getting in the way

  5. Hi ,I want to minfy the code of my project in mac (its working fyn in windows),
    I am getting the syntax error in grunt.js file in the line where am giving the path to the files
    the file code is shown below
    module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json’),
    uglify: {
    options: {
    banner: ‘/*! */\n’
    },
    build: {
    src: [‘www/js/index.js’],
    dest: [‘www/js/index.min.js’]

    }
    }
    });

    // Load the plugin that provides the “uglify” task.
    grunt.loadNpmTasks(‘grunt-contrib-uglify’);

    // Default task(s).
    grunt.registerTask(‘default’, [‘uglify’]);

    };

  6. I am trying to install on a mac. I get to this line.
    sudo npm install grunt-cli -g
    “This will put the grunt command in your system path, allowing it to be run from any directory.”

    Where is this file supposed to be installed? I have tried many locations and none of them have worked.

    I am getting this message after I install /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
    + grunt-cli@1.2.0

    Thank you for your help!

  7. I am trying to install on a mac. I get to this line.
    sudo npm install grunt-cli -g
    “This will put the grunt command in your system path, allowing it to be run from any directory.”

    Where is this file supposed to be installed? I have tried many locations and none of them have worked.

    I am getting this message after I install do I need to change a path somewhere?
    /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
    + grunt-cli@1.2.0

    Thank you for your help!

  8. Finally I figured out my mistake. You need to install Node and Grunt to your /usr/local/bin directory. Here are my install procedures in case it helps somebody else.

    Note: sudo is just required on MACs

    Node.js Installation
    Go to https://nodejs.org/en/
    Download and install the “Download for most users”
    It will save to the downloads folder on your MAC
    Install: Click on the node…pkg
    Say yes to all questions
    You should receive this message:

    “ npm was installed at
    /usr/local/bin/npm
    Make sure that /usr/local/bin is in your $PATH. “

    To confirm Node.js installation
    Terminal type: sylviamcconnell$ sudo cd /usr/local/bin/
    then type: sylviamcconnell$ node –version
    Confirmation with version: /usr/local/bin/node v6.11.2

    Grunt Installation
    Terminal type- sylviamcconnell$ sudo cd /usr/local/bin
    install type: sylviamcconnell$ sudo npm install -g grunt-cli
    to confirm install type: sylviamcconnell$ sudo grunt –version
    Confirmation with version: grunt-cli v1.2.0

Leave a Reply