js développement modulaire—Explication détaillée de Gruntfile.js

1. Introduction au module grunt

Le plug-in grunt est un outil d'automatisation dans l'environnement npm. Pour les tâches qui doivent être répétées à plusieurs reprises, telles que la compression, la compilation, les tests unitaires, le peluchage, etc., les outils automatisés peuvent réduire votre travail et simplifier votre travail. Le module grunt effectue des tâches basées sur la configuration du fichier Gruntfile.js.
Si la commande suivante est définie dans package.json :

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

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

Parce que vous exécutez npm run build Certains modules définis dans devDependencies seront installés en premier. Exécuter la commande npm run build équivaut à effectuer ce qui suit :

● npm install grunt-cli -g

● npm install

● grunt

2. La structure de gruntfile.js :

● Fonction "wrapper"

● Configuration du projet et des tâches

● Chargement des plug-ins et des tâches Grunt

● Tâches personnalisées

Fonction "wrapper"

Chaque copie de Gruntfile.js (et le plug-in grunt) suivent tous le même format. Le code Grunt que vous écrivez doit être placé dans cette fonction :

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

4. Configuration du projet et des tâches

Large Certaines tâches Grunt reposent sur certaines données de configuration. Nous configurons les paramètres de la tâche Grunt via la méthode grunt.initConfig.
Le paramètre de la méthode grunt.initConfig est un objet JSON Vous pouvez stocker n'importe quelle donnée dans cet objet de configuration. De plus, puisqu'il s'agit de JavaScript, vous pouvez utiliser n'importe quel code JS valide ici. Vous pouvez même utiliser la chaîne de modèle <% %> pour référencer les propriétés configurées, par exemple :

// 项目和任务配置
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']
  }
});

Propriétés configurées dans la méthode grunt.initConfig, dans le module de tâches, la méthode grunt.config peut être utilisé Pour accéder, par exemple :

grunt.config("proj.name");

De plus, le module de tâche grunt extraira automatiquement les attributs correspondant au nom de la tâche dans l'objet de configuration en fonction du nom de la tâche Par exemple, lors de la définition de la tâche bonjour,. dans l'attribut "hello" correspondant à l'objet de configuration Configurez la configuration et les données nécessaires à la fonction d'exécution de la tâche.

5. Chargement des tâches de plug-in grunt

Afin de réduire la duplication du travail, nous pouvons charger des tâches de plug-in existantes.

1. Chargez votre propre plug-in Grunt privé

Vous pouvez placer certains de vos propres scripts de tâches définis dans le même répertoire et les charger à partir du répertoire spécifié via la méthode grunt.loadTasks Tous les scripts de tâches grunt dans ce répertoire.

2. Chargez le plug-in grunt publié dans npm

Les tâches courantes telles que grunt-contrib-copy et grunt-contrib-uglify ont été implémentées en tant que plug-in grunt- ins Le formulaire a été développé et publié dans la bibliothèque publique npm. Tant que les plug-ins à utiliser sont répertoriés dans la dépendance du fichier package.json et installés via npm install, la tâche peut être chargée directement.

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

3. Chargez directement tous les plug-ins commençant par "grunt-"

Il existe un plug-in load-grunt-tasks sur npm qui peut être utilisé. pour charger tous les plug-ins de la liste de dépendances Plugins commençant par "grunt-".
Répertoriez les plug-ins qui doivent être utilisés en commençant par "grunt-" dans la dépendance, puis appelez-les dans Gruntfile.js.

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

6. Tâches personnalisées

1. Définir directement le comportement de la tâche

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

2. Définition Pour la liste des tâches

une tâche peut être définie comme une combinaison d'une série de tâches, qui seront exécutées en séquence.

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

3. Définir les tâches par défaut

En définissant la tâche par défaut, vous pouvez laisser Grunt exécuter une ou plusieurs tâches par défaut. Si vous ne spécifiez pas de tâche lors de l'exécution de la commande grunt, la tâche par défaut sera exécutée. Si défini ci-dessous, exécuter grunt équivaut à exécuter grunt hello.

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

4. Définir des tâches composites

La méthode registerMultiTask peut définir une tâche composite La tâche composite définira les attributs correspondants configurés dans la méthode grunt.initConfig à l'exception des options. Les attributs définis sont tour à tour traités sous forme de paires target:data.

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));
    });
};

L'exécution de Grunt Log affichera :

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教程 栏目，欢迎学习！  

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!