The minifier that we used in the previous section greatly reduced the size of our style sheet and JavaScript files and also helped reduce the overall number of requests required to render MyPhoto. However, using it has one downside—every time that you make a change to either your CSS or JavaScript code during development, you are required to rerun the tool. This greatly slows down development and can even cause frustration and hair-tearing. (Just imagine forgetting to run the minifier, thinking that you ran it, and not seeing your changes appear. You are likely to blame your code as opposed to your forgetfulness.) Therefore, would it not be nice if we could minify and concatenate our files automatically every time that we make a change to our source code?

Meet Grunt, the JavaScript Task Runner (http://gruntjs.com/). As implied by its name, Grunt is a tool that allows us to automatically run any set of tasks. Grunt can even wait while you code, pick up changes made to your source code files (CSS, HTML, or JavaScript) and then execute a preconfigured set of tasks every time that you save your changes. This way, you are no longer required to manually execute a set of commands in order for your changes to take effect.

Let's go ahead and install Grunt:

    npm install grunt

Before we can start using run with MyPhoto, we need to tell Grunt:

• What tasks to run, that is, what to do with the input (the input being our MyPhoto files) and where to save the output
• What software is to be used to execute the tasks
• How to name the tasks so that we can invoke them when required

With this in mind, we create a new JavaScript file (assuming UTF-8 encoding), called Gruntfile.js, inside our project root. We will also need to create a JSON file, called package.json, inside our project root. Our project folder should have the following structure (note how we created one additional folder, src, and moved our source code and development assets inside it):

src 
|__bower_components
|__images
|__js
|__styles
|__index.html
Gruntfile.js
package.json

Open the newly created Gruntfile.js and insert the following function definition:

    module.exports = function(grunt) {   
        grunt.initConfig({ 
            pkg: grunt.file.readJSON("package.json") 
        }); 
    }; 

As you can see, this is plain, vanilla JavaScript. Anything that we need to make Grunt aware of (such as the Grunt configuration) will go inside the grunt.initConfig function definition. Adding the configuration outside the scope of this function will cause Grunt to ignore it.

Now open package.json and insert the following:

    { 
        "name": "MyPhoto", 
        "version": "0.1.0", 
        "devDependencies": { 
        } 
    } 

The preceding code should be self-explanatory. The name property refers to the project name, version refers to the project's version, and devDependencies refers to any dependencies that are required (we will be adding to those in a while).

Great, now we are ready to start using Grunt!