How to set up a Grunt JS project

This tutorial will show you how to setup a basic gruntjs project. I will presume you have already got Grunt JS installed on your machine. If you don’t, follow a previous tutorial on here explaining how to install Grunt JS. Once you’re done, head back over here to learn how to set up a Gruntjs project!

I’m going to be doing this on a Mac – but the principles are all the same. I’ve set up a new directory inside my Documents, called ‘grunt-tutorial’. This is going to be the folder for my new Grunt JS project:

Image may be NSFW.
Clik here to view.

Open up your Terminal and cd into the same directory as above. We’ll be running out our grunt commands from inside here. For me, that’s cd grunt-tutorial

Image may be NSFW.
Clik here to view.

We need to create two files for our new Grunt JS project – they form the boilerplate for a Grunt JS project, and provide some configuration. The files we need to create are:

• package.json
• Gruntfile.js

Let’s create the package.json file first. Open up your IDE of choice, and create a new JavaScript document, save it as package.json inside of our new directory. This file will contain the configuration Grunt JS needs to install from, and can also be used later on as a reference for any Grunt tasks we create. This is the contents of my package.json file (you can modify yours accordingly):

{
  "name": "setup-gruntjs-project-tutorial",
  "version": "1.0.0",
  "description": "How to setup a new Grunt JS Project",
  "main": "Gruntfile.js",
  "author": "Code Chewing",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

Here it is in my IDE:

Image may be NSFW.
Clik here to view.

Some notes on this

• Make sure the name value doesn’t have any spaces
• Make sure the version number has a 3 part pattern to it (x.y.z)
• The devDependencies object contains the grunt version we want to use for this project. This is the only dependency we need, as we’re not interested in any other npm modules for this tutorial

We can now move on to creating our Gruntfile.js file. Create a new JavaScript document in your IDE, and save it in the same place as package.json. Gruntfile.js can be left blank for now – we’ll add some content later on:

Image may be NSFW.
Clik here to view.

You should now have a file structure just like the following:

Image may be NSFW.
Clik here to view.

We now have all the essential configuration Grunt JS needs to begin a new project. As of now, typing grunt in the Terminal (inside of our project directory) will result in a similar error to below:

Image may be NSFW.
Clik here to view.

This is as expected. Grunt tries to look for the local grunt (this is so you can have many grunt project instances on your machine). We need to install a local grunt inside our project directory. It’s simple; Inside Terminal, within our project directory, type npm install

It will automatically read the packages.json file we made earlier, check for what devDependencies are required, then install all the necessary node modules listed (which for us, is just grunt). The start of the install should look something like this:

Image may be NSFW.
Clik here to view.

And the tail end of the npm install should look similar to this:

Image may be NSFW.
Clik here to view.

If you go back into your project directory, you’ll see we now have our node modules installed for this project (which is only grunt – as specified in the devDependencies part of package.json):

Image may be NSFW.
Clik here to view.

We can now (almost) start using grunt in our new project. If we type grunt right now inside the Terminal, we’ll get this error:

Image may be NSFW.
Clik here to view.

So to finish off setting up our Grunt JS project, we should add (at least) a default task to our Gruntfile.js file to make sure things are working. Here’s some new content we’re going to put inside of our currently empty Gruntfile.js file:

module.exports = function(grunt){ // 1

  grunt.initConfig({ // 2
        pkg: grunt.file.readJSON('package.json') // 3
  });

  grunt.registerTask('default', function() { // 4
      grunt.log.writeln('Hello, from the default grunt task!'); // 5
  });

}

What’s going on in the above code?

1. We wrap everything inside this file within; module.exports = function(grunt){}
2. We set up the initialising configuration; grunt.initConfig({})
3. Although not necessary, we ‘import’ the package.json details into this file. By doing this, we can use the information from package.json for grunt tasks (we won’t be doing anything with it for this tutorial – but it’s good to be aware of)
4. We register a basic default grunt task; grunt.registerTask(). This is a task designed to run when you just type the single word grunt in the Terminal. The first argument to grunt.registerTask() is to declare this as the default grunt task. The second argument is an anonymous function that is used to execute the task.
5. The self explanatory function grunt.log.writeln() outputs a line into the Terminal

Save the Gruntfile.js file. Now let’s see this in action! Type grunt in the Terminal (as always, make sure you’re inside the grunt project directory):

Image may be NSFW.
Clik here to view.

As you can see, we get our expected output into the console!

This is obviously not a practical task you’d particularly want Grunt JS to perform, but it demonstrates that you now have Grunt JS set up correctly. You can now modify and configure your Gruntfile.js as you wish, to perform some advanced automation for your web development projects; such as concatenating, minifying and running JSHint on your JavaScript files.