js modular development—Gruntfile.js detailed explanation

1. Introduction to grunt module

The grunt plug-in is an automation tool in the npm environment. For tasks that need to be repeated repeatedly, such as compression, compilation, unit testing, linting, etc., automated tools can reduce your labor and simplify your work. The grunt module performs tasks based on the configuration in the Gruntfile.js file.
If the following command is defined in package.json:

[Related course recommendations: JavaScript video tutorial]

"scripts": {
    "build": "npm install && grunt"
}

Because runningnpm run build Some modules defined in devDependencies will be installed first, then running the npm run build command is equivalent to doing the following:

● npm install grunt-cli -g

● npm install

● grunt

2. Structure of gruntfile.js:

● "wrapper" function

● Project and task configuration

● Loading grunt plug-ins and tasks

● Custom tasks

3. "wrapper" function

Each copy of Gruntfile.js ( and grunt plug-in) follow the same format. The Grunt code you write must be placed within this function:

module.exports = function(grunt){
         //do grunt-related things in here
}

4. Project and task configuration

Most of All Grunt tasks rely on certain configuration data. We configure the parameters of the Grunt task through the grunt.initConfig method.
The parameter of the grunt.initConfig method is a JSON object. You can store any data in this configuration object. Additionally, since this is JavaScript, you can use any valid JS code here. You can even use <% %> template string to refer to already configured properties, for example:

// 项目和任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), //获取 package.json 中的元数据(js代码)
  proj:{
    name:'hello',
    description:'a hello demo'
  },
  hello: {
    options: {
      name: '<%= proj.name %>'  //用<% %>模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

The properties configured in the grunt.initConfig method, in the task module, can use the grunt.config method To access, for example:

grunt.config("proj.name");

In addition, the grunt task module will automatically extract the attributes corresponding to the task name in the configuration object based on the task name. For example, if you define the task hello, then in the attribute "hello" corresponding to the configuration object Configure the configuration and data needed in the task execution function.

5. Loading grunt plug-in tasks

In order to reduce duplication of work, we can load existing plug-in tasks.

1. Load your own private grunt plug-in

You can place some of your own defined task scripts in the same directory and load them from the specified directory through the grunt.loadTasks method All grunt task scripts in this directory.

2. Load the grunt plug-in published in npm

Common tasks like grunt-contrib-copy and grunt-contrib-uglify have been implemented as grunt plug-ins The form has been developed and published in the npm public library. As long as the plug-ins to be used are listed in the dependency in the package.json file and installed through npm install, the task can be loaded directly.

// 加载能够提供"copy"任务的插件。
grunt.loadNpmTasks('grunt-contrib-copy');

3. Directly load all plug-ins starting with "grunt-"

There is a load-grunt-tasks plug-in on npm that can be used to load all plug-ins in the dependency list Plug-ins starting with "grunt-".
List the plug-ins that need to be used starting with "grunt-" in the dependency, and then call them in Gruntfile.js.

//Load grunt tasks from NPM packages
load-grunt-tasks

6. Custom tasks

1. Directly define the behavior of the task

grunt.registerTask('hello', 'Show some msg', function() {
  console.log(this.options().name); //输出hello
});

2.Definition For the task list

a task can be defined as a combination of a series of tasks, which will be executed in sequence.

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

3. Define the default task

By defining the default task, you can let Grunt execute one or more tasks by default. If you do not specify a task when executing the grunt command, the default task will be executed. If defined below, executing grunt is equivalent to executing grunt hello.

grunt.registerTask('default', ['hello']);

4. Define compound tasks

registerMultiTask method can define a compound task. The compound task will set the corresponding attributes configured in the grunt.initConfig method except options. The defined attributes are processed as target:data pairs in turn.

module.exports = function(grunt) {
    grunt.initConfig({
        Log: {
            options: {
                sep: ';'
            },
            srcs: ['1.txt', '2.txt'],
            dests: ['d1.txt', 'd2.txt']
        }
    });
    grunt.registerMultiTask("Log", function() {
        var options = this.options({ sep: '&' });
        console.log(this.target); 
        console.log(this.data.join(options.sep));
    });
};

Executing grunt Log will output:

Running "Log:srcs" (Log) task
srcs
1.txt;2.txt
Running "Log:dests" (Log) task
dests
d1.txt;d2.txt

定义任务行为Tips

1.任务内部可以执行其他的任务。

grunt.registerTask('mytask', function() {
  grunt.task.run('task1', 'task2');
  // Or:
  grunt.task.run(['task1', 'task2']);
});

2.定义异步任务

grunt.registerTask('mytask', function() {
  var done = this.async();
  //do something
  done();
});

3.当任务失败时，所有后续任务都将终止

在任务中，当执行失败，可以return false来表明当前任务执行失败，一般，多个任务按顺序执行，如果有任务失败时，所有后续任务都将终止。可以通过在命令行后加上--force来使有任务失败时，后续任务能继续进行。

4.任务中检查前置任务状态

有些任务可以依赖于其他任务的成功执行。通过grunt.task.requires方法来检查其前置任务是否已经执行，并且没有失败。

5.任务中检查配置属性

可以用方法grunt.task.requiresConfig指定一个或者多个字符串或者数组的配置属性为必需的。如果一个或多个必需的配置属性缺失，就通知系统当前任务失败。

本文来自 js教程 栏目，欢迎学习！  

The above is the detailed content of js modular development—Gruntfile.js detailed explanation. For more information, please follow other related articles on the PHP Chinese website!