Understanding Gruntjs Registertask Colon

I'm currently trying to learn gruntjs for dev and production build. I want to assign a global config variable to determine stuff. I have a simple initConfig : grunt.initConfig({

Solution 1:

Why would I use a colon instead of a dot to reference an object?

To understand why, you firstly need to understand grunt task configurations and targets.

Single Target

To help you further understand this concept and terminology, take a look at this example configuration for a grunt plugin called grunt-contrib-copy. It's a plugin that copies files. Below is a snippet of that code:

grunt.initConfig({

    copy: { // <-- Task
        main: { // <-- Target
            // ... <-- other configurations go here.
        }
    }

});

In this example above the Task is named copy and it includes a single Target named main.

To register this Task you would do so as follows:

grunt.registerTask('copyFiles', ['copy:main']);

and you would enter the following via your command line to run it:

$ grunt copyFiles

Multiple Targets

Grunt Tasks can also include more than one Target. Consider this example code below:

grunt.initConfig({
    copy: {
        js: {
            // ... <-- Additional configurations for this Target go here.
        },
        css: {
            // ... <-- Additional configurations for this Target go here.
        }
    }
});

You could register the example above as follows:

grunt.registerTask('copyJavaScriptFiles', ['copy:js']);
grunt.registerTask('copyCssFiles', ['copy:css']);

So, via the command line:

1. Running $ grunt copyJavaScriptFiles will copy all the JS files according to the configurations specified.

2. Running $ grunt copyCssFiles will copy all the CSS files according to the configurations specified.

If you wanted to copy both the JS and CSS files you could register a task as follows:

grunt.registerTask('copyAll', ['copy']);

And you would run it by entering $ grunt copyAll in your command line.

Notice in the last example it does not include any colon :. Grunt this time will run all the Targets in the copy Task, namely the js one and the css one.

---

And what is the difference between a colon and a simple dot?

Colon

Hopefully by now you can see what the colon : does. It is used to reference a particular Target within a Task and is typically only used when a Task has multiple Targets and you want to specifically reference one of them.

Simple dot

The simple dot is JavaScript's standard notation to access properties of an object. Google "JavaScript notation" to find out more about Dot Notation and Square Bracket Notation.

Within the context of your Gruntfile.js the dot notation is typically used to call the functions/methods/properties of the grunt object. For example:

grunt.initConfig({...});

grunt.loadNpmTasks(...);

grunt.registerTask(...);

---

EDIT 1 Updated the answer after the original post/question was updated.