How to customize Grunt tasks
Sometimes we need to write some of our own grunt tasks, here is a specific example
1. Preparation
1. Create a new directory g1
2. Create a new package.json and put it in g1
3. Create a new Gruntfile.js and put it in g1
package.json
The code copy is as follows:
{
"name": "g1",
"version": "0.1.0",
"author": "@snandy",
"homepage": "http://www.g1.com",
"devDependencies": {
"grunt": "~0.4.0"
}
}
4. Enter g1 by cd, install the grunt package npm install
The entire directory structure is as follows
Gruntfile.js is temporarily empty.
2. Create the easiest task
grunt.registerTask(taskName, [description,] taskFunction)
taskName task name, use grunt + taskName in the command line
Description of the task
taskFunction task implementation
Fill in the code in Gruntfile.js
The code copy is as follows:
module.exports = function(grunt) {
grunt.registerTask('mytask', 'A simplest task demonstration, prints different outputs according to parameters.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln('task' + this.name + ", no parameters passed");
} else if (arguments.length === 1) {
grunt.log.writeln('task' + this.name + ", there is a parameter that is " + arg1);
} else {
grunt.log.writeln('task' + this.name + ", there are two parameters: " + arg1 + ", " + arg2);
}
});
};
A task "mytask" has been registered to implement the simplest implementation of different printouts according to the passed parameters. We need to enter the command line according to the running results.
Enter the g1 directory and enter grunt mytask
Enter grunt mytask:snandy
Add a colon to the task name to pass the argument
Enter grunt mytask:snandy:backus
Colon interval can pass multiple parameters
3. Create multiple tasks at once
grunt.registerMultiTask(taskName, [description,] taskFunction)
You can see that the parameters are the same and the method names are different. But the usage method is different, you need to initialize config first, Gruntfile.js is as follows
The code copy is 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 it separately
Enter grunt and three subtasks will be executed in turn t1, t2, t3
Enter grunt log:t1, grunt log:t2, grunt log:t3 respectively
4. Inter-task communication
Another task can be called inside one task, as follows
The code copy is as follows:
module.exports = function(grunt) {
grunt.registerTask('mytask', 'A simplest task demonstration, prints different outputs according to parameters.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln('task' + this.name + ", no parameters passed");
} else if (arguments.length === 1) {
grunt.log.writeln('task' + this.name + ", there is a parameter that is " + arg1);
} else {
grunt.log.writeln('task' + this.name + ", there are two parameters: " + arg1 + ", " + arg2);
}
});
grunt.registerTask('default', 'default', function() {
// Call mytask
grunt.task.run('mytask:param1:param2')
})
};
Enter the command line and enter grunt
Call multiple tasks, and pass them to the run method separated by commas, or in an array form
The code copy is as follows:
grunt.registerTask('default', 'default', function() {
grunt.task.run('mytask1', 'mytask2')
// or
grunt.task.run(['mytask1', 'mytask2'])
})