The Tasks section for building Web applications using GruntJS

How do I customize the Grunt task

Sometimes we need to write our own grunt task. Here is an example

A, preparation,

1. Create a new directory g1
2. Create package.json and put it into g1
3. New gruntfile.js and put it into g1

Package. The json

 
{
    "name": "g1",
    "version": "0.1.0",
    "author": "@snandy",
    "homepage": "http://www.g1.com",
    "devDependencies": {
        "grunt": "~0.4.0"
    }
}

4. CD into g1, NPM install install grunt package

The entire directory structure is as follows

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031571.png ">

Gruntfile.js is temporarily empty.

Create a simple task

Grunt. RegisterTask (taskName, description, taskFunction)

TaskName taskName, use grunt + taskName on the command line
Description of the task
The implementation of the taskFunction task

Gruntfile.js and fill in the code

 
module.exports = function(grunt) {
    grunt.registerTask('mytask', ' One of the simplest task demos is to print different output according to the parameters .', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln(' task ' + this.name + ",  No pass parameter ");
        } else if (arguments.length === 1) {
            grunt.log.writeln(' task ' + this.name + ",  There is one parameter " + arg1);
        } else {
            grunt.log.writeln(' task ' + this.name + ",  There are two parameters " + arg1 + ", " + arg2);
        }
    });
};

Registered a task "mytask", the simplest to achieve a different printout according to the different parameters, to see the results of the run we need to enter the command line.

Go to the g1 directory and type grunt mytask

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031572.png ">

Grunt mytask:snandy

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031573.png ">

Add a colon after the name of the task to pass arguments

Grunt mytask:snandy:backus

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031574.png ">

The colon interval can pass more than one parameter

Create multiple tasks at once

Grunt. RegisterMultiTask (taskName, description, taskFunction)

You can see that the arguments are the same and the method names are different. But the way of use is not quite the same, you need to initialize config, gruntfile.js as follows

 
module.exports = function(grunt) {
    grunt.initConfig({
        log: {
            t1: [1, 2, 3],
            t2: 'hello world',
            t3: false
        }
    });

    grunt.registerMultiTask('log', 'Log stuff.', function() {
        grunt.log.writeln(this.target + ': ' + this.data);
    });
};

Enter the g1 directory and test them separately

Enter grunt, and it will execute three subtasks, t1,t2, and t3

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031575.png ">

Enter grunt log:t1, grunt log:t2, and grunt log:t3, respectively

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031576.png ">

Communication between tasks

Within one task, another task can be invoked, as shown below

 
module.exports = function(grunt) {

    grunt.registerTask('mytask', ' One of the simplest task demos is to print different output according to the parameters .', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln(' task ' + this.name + ",  No pass parameter ");
        } else if (arguments.length === 1) {
            grunt.log.writeln(' task ' + this.name + ",  There is one parameter " + arg1);
        } else {
            grunt.log.writeln(' task ' + this.name + ",  There are two parameters " + arg1 + ", " + arg2);
        }
    });

    grunt.registerTask('default', ' Default task ', function() {
        //Call mytask
        grunt.task.run('mytask:param1:param2')
    })
};

Go to the command line and type grunt

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060611031577.png ">

Call multiple tasks, passing them to the run method as a comma, or as an array