Use Gruntjs to build a Web program's tasks (tasks) Article _node.js

Source: Internet
Author: User

How to customize Grunt tasks

Sometimes we need to write some of our own grunt tasks, and here's a concrete example

First, prepare

1. Create a new directory G1
2. New Package.json, put in G1
3. New Gruntfile.js, put in G1

Package.json

Copy Code code as follows:

{
"Name": "G1",
"Version": "0.1.0",
"Author": "@snandy",
"Homepage": "Http://www.g1.com",
"Devdependencies": {
"Grunt": "~0.4.0"
}
}

4. CD into G1,NPM install installation Grunt Pack

This entire directory structure is as follows

The gruntfile.js is temporarily vacant.

Second, create one of the simplest tasks

Grunt.registertask (taskname, [description,] taskfunction)

TaskName Task Name, use Grunt + taskname in command line
Description of the description task
The realization of taskfunction task

Gruntfile.js, fill in the code.

Copy Code code as follows:

Module.exports = function (grunt) {
Grunt.registertask (' MyTask ', ' one of the simplest task demos, prints different output depending on the parameters. ', function (Arg1, arg2) {
if (Arguments.length = = 0) {
Grunt.log.writeln (' task ' + THIS.name + ", no pass parameters");
else if (arguments.length = = 1) {
Grunt.log.writeln (' task ' + THIS.name + ", there is a parameter is" + arg1);
} else {
Grunt.log.writeln (' task ' + THIS.name + '), there are two parameters are "+ arg1 +", "+ arg2";
}
});
};

Registered a task "mytask", the implementation of a simple according to the parameters of the different output to achieve different print, see the results of the operation we need to enter the command line.

Go to G1 directory, enter Grunt MyTask

Re-enter Grunt Mytask:snandy


A colon is appended to the task name

Re-enter Grunt Mytask:snandy:backus


A colon interval can pass multiple arguments

三、一次 Create multiple tasks

Grunt.registermultitask (taskname, [description,] taskfunction)

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

Copy Code code 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, respectively, to test the

When you enter grunt, three subtasks are executed sequentially t1,t2,t3

Enter Grunt Log:t1 respectively, Grunt log:t2, Grunt Log:t3


Iv. Inter-mission communications

You can invoke another task within one task, as follows

Copy Code code as follows:

Module.exports = function (grunt) {

Grunt.registertask (' MyTask ', ' one of the simplest task demos, prints different output depending on the parameters. ', function (Arg1, arg2) {
if (Arguments.length = = 0) {
Grunt.log.writeln (' task ' + THIS.name + ", no pass parameters");
else if (arguments.length = = 1) {
Grunt.log.writeln (' task ' + THIS.name + ", there is a parameter is" + arg1);
} else {
Grunt.log.writeln (' task ' + THIS.name + '), there are two parameters are "+ arg1 +", "+ arg2";
}
});

Grunt.registertask (' defaults ', ' default tasks ', function () {
Call MyTask
Grunt.task.run (' mytask:param1:param2 ')
})
};

Go to the command line and enter grunt

Call multiple tasks, separated by commas to the run method, or as an array

Copy Code code as follows:

Grunt.registertask (' defaults ', ' default tasks ', function () {
Grunt.task.run (' Mytask1 ', ' Mytask2 ')
Or
Grunt.task.run ([' Mytask1 ', ' Mytask2 '])
})

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.