Accueil Nos publications Blog Grunt (4) : Créer des tâches

Web Front

Niveau

02/02/2015 7 min

Grunt (4) : Créer des tâches

La lecture des précédents articles de cette série fait que l’API Grunt et la configuration des tâches n’ont plus de secret pour vous ? Passons à la création de tâches !

Simple, à cibles multiples, alias, asynchrone : il y en a pour tous les goûts.

Que contient cet article ?

Dans les articles précédents, vous avez eu un aperçu des deux types de tâche proposés par Grunt. Dans cet article, vous allez en apprendre les bases de l’écriture.

tâche simple
tâche à cibles multiples ou “multitâche”

Les tâches Grunt mise en file s’exécutent toujours séquentiellement : lorsqu’une se termine avec succès, la suivante peut commencer ; lorsqu’une tâche se termine en erreur, l’exécution de la séquence est interrompue. Ce mécanisme séquentiel fonctionne naturellement si le code des tâches est synchrone. En revanche, s’il comporte une composante asynchrone, cela peut casser la gestion continu-si-succès/stop-si-erreur de la séquence. Grunt fournit un mécanisme permettant de conserver ce mode de fonctionnement.

tâche asynchrone

Créer des tâches…

Oui, mais quelles types de tâches peut-on créer ? Si vous avez lu les premiers articles de cette série consacrée à Grunt, vous connaissez la réponse :

Des tâches “simples” : une configuration ou pas de configuration, une tâche à réaliser
Des tâches “à cibles multiples” : un ensemble de configurations, une tâche à réaliser pilotée par la cible

Une tâche, classiquement, est synchrone. Cela signifie que l’exécution de son code est séquentielle et que l’action suivante s’exécutera qu’une fois que l’action courante s’est terminée. Grunt propose cependant un mécanisme permettant à une tâche – simple ou à cibles multiples – de s’exécuter de manière asynchrone. Nous verrons dans une section séparée comment rendre une tâche asynchrone.

Voyons tout de suite ça plus en détail…

Simples

Contexte : piqûre de rappel

Une tâche est une fonction JavaScript. En JavaScript, le mot-clé this utilisé dans le corps d’une fonction se rapporte à l’objet contexte de celle-ci. Dans le cas des tâches Grunt, le contexte permet d’accéder à un certain nombre de propriétés et de méthodes utiles. Dans les exemples suivants, par exemple, vous verrez que l’objet configuration relatif à une tâche est accessible via this.options().

Je vous renvoie aux précédents articles pour plus de détails :

L’API Grunt : this
Configurer les tâches : this.options()

registerTask

Créer une tâche simple revient à appeler la méthode grunt.registerTask en lui passant en paramètre :

un nom de tâche, une description (facultatif) et une fonction avec ou sans paramètre.
```
grunt.registerTask(taskName, [description, ] taskFunction)
```
un nom de tâche, une description (facultatif) et une liste de tâches simples et/ou à cibles multiples.
```
grunt.registerTask(taskName, [description, ] taskList)
```

Comme fonction

Vous créez une tâche simple lorsque vous avez besoin d’une tâche répondant au moins à l’un de ces critères :

pas de configuration
toujours la même action sur les mêmes objets

Illustrons ces deux cas :

Vous voulez toujours copier un fichier F de A vers B ? Une tâche sans configuration.
Vous voulez copier un fichier F de A vers B, mais vous prévoyez que F, A et B puissent être changés au besoin ? Une configuration définissant F, A et B, une tâche qui fait toujours la même action de copie de F de A vers B.

Illustrons le cas 1) précédent :


module.exports = function(grunt) {
  // une tâche simple copiant un fichier donné de A vers B
  grunt.registerTask('copyF', 'Copy file A into folder B', function(logEnabled) {
    var F = 'the_file.txt',
        A = 'c:\\',
        B = 'd:\\';

    if (logEnabled){
       grunt.log.writeln('copy of ' + F + ' from ' + A + ' to ' + B);
    }

    grunt.file.copy(A + F, B + F);

    if (logEnabled){
       grunt.log.writeln('copy done');
    }
  });
};

Et le cas 2) :


module.exports = function(grunt) {
  grunt.initConfig({
    copyF: {
      options: {
        F: 'the_file.txt',
        A: 'c:\\',
        B: 'd:\\'
      }
    }
  });

  // une tâche simple copiant un fichier donné de A vers B
  grunt.registerTask('copyF', 'Copy file A into folder B', function(logEnabled) {
    var F = this.options().F,
        A = this.options().A,
        B = this.options().B;

    if (logEnabled){
      grunt.log.writeln('copy of ' + F + ' from ' + A + ' to ' + B);
    }

    grunt.file.copy(A + F, B + F);

    if (logEnabled){
      grunt.log.writeln('copy done');
    }
  });
};

Comme alias

Une tâche simple peut aussi n’être qu’un alias permettant de lancer séquentiellement une liste de tâches simples et/ou à cibles multiples.


// la tâche dist lance séquentiellement chacune des tâches de la liste
grunt.registerTask('dist', ['jshint', 'qunit', 'concat:dist', 'uglify:dist']);

A cibles multiples

Késako ?

Une tâche à cibles multiples, ou “multitâche”, est une tâche pour laquelle les propriétés de l’objet de configuration – à l’exception de la propriété options – sont autant de configurations individuelles.

Chacune de ces configurations est appelée “cible”. Si la tâche s’exécute sur une cible, elle s’exécute avec la configuration de cette cible. Si la tâche s’exécute sans qu’une cible ne soit spécifiée, elle s’exécute séquentiellement pour chacune des cibles définies.

Quel avantage par rapport à une tâche simple ?

Une tâche simple produit le même résultat à chaque exécution, sauf si la fonction qui la définit accepte des arguments permettant de piloter son comportement. Cependant :

les arguments de la fonction ne permettent pas la même flexibilité que la configuration
les arguments de la fonction ne sont pas gérés par Grunt : cf. Configurer les tâches (options, fichiers src-dest, templates, etc.)

Au crédit des tâches à cibles multiples :

La même tâche peut être exécutée plusieurs fois au cours d’un même process avec des configurations différentes et donc produire des résultats différents.
La même tâche peut être exécutée dans des process différents avec des configurations différentes et donc produire des résultats différents suivant le process.
Les tâches à cibles multiples fournissent à support à la gestion des fichiers source-destination qui n’existe pas pour les tâches simples.

Contexte : piqûre de rappel

Le contexte des tâches à cibles multiples fournit les mêmes fonctionnalités que les tâches simples, mais pas que ! Je vous renvoie à la section sur le contexte des tâches à cibles multiples de l’article sur l’API Grunt pour plus d’informations.

registerMultiTask

Créer une tâche à cibles multiples revient à appeler la méthode grunt.registerMultiTask en lui passant en paramètre :

un nom de tâche
une description (facultatif)
une fonction avec ou sans paramètre


grunt.registerMultiTask(taskName, [description, ] taskFunction)

Exemple

Reprenons l’exemple de la tâche copyF et adaptons-le pour en faire une tâche à cibles multiples.


module.exports = function(grunt) {
  grunt.initConfig({
    deployConfig: {
      dev: {
        A: 'c:\\dev.config',
        B: 'd:\\application.config'
      },
      uat: {
        A: 'c:\\uat.config',
        B: '\\\\UAT_SERVER\\c$\\application.config'
      },
      prod: {
        A: 'c:\\prod.config',
        B: '\\\\PROD_SERVER\\c$\\application.config'
      }
    }
  });

  // une tâche simple copiant un fichier donné de A vers B
  grunt.registerTask('deployConfig', 'Deploy config from A to B', function(logEnabled) {
    var A = this.options().A,
        B = this.options().B;

    if (logEnabled){
      grunt.log.writeln('deploy from ' + A + ' to ' + B);
    }

    grunt.file.copy(A, B);

    if (logEnabled){
      grunt.log.writeln('copy done');
    }
  });
}

Cette tâche permet de déployer la configuration adaptée à l’environnement ciblé.

Asynchrones

Une tâche se termine lorsque la fonction retourne. Lorsqu’une vous exécutez une séquence de tâches, par exemple via une tâche alias, une tâche de la séquence ne débutera que lorsque la précédente se termine. Une tâche dans son ensemble est donc synchrone.

Cependant, le code qu’exécute une tâche peut être asynchrone. Typiquement, vous pouvez exécuter une requête AJAX ou tout autre procédé asynchrone. Exécuter du code asynchrone dans une tâche synchrone peut aboutir à la cinématique suivante :

Début d’exécution de la tâche A
Un code asynchrone se lance dans la tâche A
Fin d’exécution du code synchrone de la tâche A qui retourne avec succès. Le code asynchrone est interrompu
Début d’exécution de la tâche B
La tâche B s’exécute sur un contexte potentiellement erroné : des données, des fichiers ou autres n’ont pas encore été traités par le code asynchrone de la tâche A

A ce stade :

Le code asynchrone de la tâche A ne s’est pas exécuter jusqu’à son terme
La tâche B peut retourner une erreur si elle travaille sur des données erronées du fait du traitement incomplet de la tâche précédente
La tâche B peut retourner avec succès mais n’avoir réalisé qu’un traitement partiel : par exemple, si la tâche B copie des fichiers la copie peut n’être que partielle si la tâche A n’a pas fini de les générer au moment où B s’exécute

Prenons un exemple simple :


module.exports = function(grunt) {
  grunt.registerTask('asyncTask', 'Ma tâche asynchrone.', function(n) {
    grunt.log.writeln(n + " : avant le code asynchrone")

    setTimeout(function() {
      grunt.log.writeln(n + " : code asynchrone");
    }, n*1000);

    grunt.log.writeln(n + " : apres le code asynchrone");
  });

  grunt.registerTask('default', [
    'asyncTask:2',
    'asyncTask:4',
    'asyncTask:1',
    'asyncTask:3'
  ]);
}

L’exécution de la tâche default produit le résultat suivant :

Comme vous pouvez le constater dans ce scénario, Le code ne s’exécute pas comme on pourrait se l’imaginer. Les tâches s’exécutent séquentiellement, mais aucune ne produit le log de la partie asynchrone. L’exécution du code asynchrone a été interrompue par le retour en succès généré par Grunt à la fin de l’exécution du code synchrone de la tâche.

La solution serait qu’une tâche ayant un code asynchrone ne retourne qu’une fois que ce code a terminé son exécution.

L’objet this expose une fonction async qui notifie Grunt que la tâche comporte du code asynchrone. this.async() renvoie une méthode done. L’exécution de done signifiera à Grunt que la composante asynchrone de la tâche s’est terminé. Pour indiquer une fin d’exécution en erreur, il suffit de passer en paramètre de done un objet ou false.


module.exports = function(grunt) {
  grunt.registerTask('asyncTask', 'Ma tâche asynchrone.', function(n) {
    grunt.log.writeln(n + " : avant le code asynchrone")

var done = this.async();
    setTimeout(function() {
      grunt.log.writeln(n + " : code asynchrone");
      done();
    }, n*1000);

    grunt.log.writeln(n + " : apres le code asynchrone");
  });

  grunt.registerTask('default', [
    'asyncTask:2',
    'asyncTask:4',
    'asyncTask:1',
    'asyncTask:3'
  ]);
}

L’exécution de la tâche default produit le résultat suivant :

Les tâches s’exécutent séquentiellement : 2 – 4 – 1 – 3
Pour chaque tâche, le code synchrone s’exécute et la fin du code asynchrone survient en dernier

Ne réinventez pas la roue…

Avant de vous lancer dans la création d’une tâche, demandez-vous si vous n’êtes pas en train de réinventer la roue. Si vous avez besoin de réaliser certaines tâches dans votre projet : n’existe-t-il pas déjà un package qui correspond à votre besoin ?

La communauté Grunt propose à ce jour plus de 3000 plugins permettant de réaliser toutes les actions classiques. Pour n’en citer que quelques-unes (cf. Grunt (1)) :

tests unitaires
minification
concaténation
transcompilation
linting
file watching
déploiement

En général, vous trouverez votre bonheur parmi les plugins existants. Le plus gros de votre travail consistera à écrire la configuration adéquate pour utiliser au mieux les packages existants dans vos projets et à créer des tâches “alias” pour lancer un ensemble de tâches avec une seule commande.

Et après ?

A ce stade, vous voilà capable de créer et configurer vos tâches Grunt. Il ne vous manque plus qu’à les exécuter ! Voilà donc tout trouver le sujet du prochain article de la série.

Rédigé par :

Nourdine FALOLA

Néosoft rejoint le réseau de partenaires AWS

Grunt (4) : Créer des tâches

Que contient cet article ?

Créer des tâches…

Simples

Contexte : piqûre de rappel

registerTask

Comme fonction

Comme alias

A cibles multiples

Késako ?

Contexte : piqûre de rappel

registerMultiTask

Exemple

Asynchrones

Ne réinventez pas la roue…

Et après ?