Tutoriel pour apprendre à utiliser l'outil JavaScript Grunt - Exécuter des tâches

Grunt s'exécute en ligne de commande. Une fois le CLI installé, la commande grunt permet de lancer une séquence synchrone de tâches. Synchrone signifie qu'une tâche commence son exécution dès que la précédente tâche de la séquence s'est terminée. Ce mécanisme permet de contrôler l'ordre d'exécution.

$ grunt task1 task2 task3

Si vous lancez la commande grunt sans spécifier de tâche, c'est la tâche nommée default qui est exécutée. Cela revient donc à lancer une séquence d'une seule tâche default. Si aucune tâche default n'existe dans le Gruntfile, une exception est générée.

$ grunt
$ grunt default

La tâche default peut n'être qu'un alias pour une séquence de tâches. Cet alias vous sert donc de raccourci pour exécuter une séquence de tâches.

Une tâche alias s'écrit de la manière suivante :

grunt.registerTask(alias, description, sequence);

où sequence est un tableau de noms de tâches à exécuter séquentiellement.

// exemple d'une tâche alias lançant séquentiellement les tâches task1 et task2
grunt.registerTask('alias', 'Description de la tâche "alias".', ['task1', 'task2']);

Un alias permet de lancer une séquence de tâches sans contrôle d'aucune sorte, si ce n'est qu'une tâche de la séquence ne peut s'exécuter que si la tâche précédente s'est terminée avec succès.

Si l'on veut aller plus loin, il est possible de créer une tâche qui lance d'autres tâches sans pour autant être un alias. Cela est utile si l'on veut, par exemple, ne pas lancer une tâche si une condition particulière n'est pas remplie ou en lancer une autre à la place. grunt.task.run permet cela.

module.exports = function(grunt) {
 
  grunt.registerTask('less', 'Compiles LESS to CSS.', function() {
    // ...
  });
 
  grunt.registerTask('minify', 'Minifies JavaScript & CSS files.', function() {
    // ...
  });
 
  grunt.registerTask('deployDfs', 'Deploys the Web site via the DFS.', function() {
    // ...
  });
 
  grunt.registerTask('deployFtp', 'Deploys the Web site via FTP.', function() {
    // ...
  });
 
  grunt.registerTask('customSequence', 'Does all the stuff.', function(build, mode){
    if (build==='true'){
      grunt.task.run('less');
      grunt.task.run('minify');
    }
 
    if (mode==="ftp"){
      grunt.task.run('deployFtp');
    }
    else if (mode==="dfs"){
      grunt.task.run('deployDfs');
    }
  });
 
}

Les arguments d'une tâche sont passés en ligne de commande à la suite du nom de la tâche et séparés par un deux-points.

module.exports = function(grunt) {
  grunt.registerTask('task', 'Tâche avec arguments?', function() {
    grunt.log.writeln(this.args);
  });
}

Pour les multitâches, il est obligatoire de spécifier la cible avant les arguments :

module.exports = function(grunt) {
  grunt.initConfig({
    multiTask: {
      target1: {
      },
      target2: {
      }
    }
  });
 
  grunt.registerMultiTask('multiTask', 'Tâche avec arguments?', function() {
    grunt.log.writeln("target : " + this.target);
    grunt.log.writeln("arguments : " + this.args);
  });
}

Les options d'exécution sont passées à la fin de la ligne de commande et précédées d'au moins un tiret. Les noms des options sont sensibles à la casse.

Grunt fournit les options suivantes :

• --help, -h : affiche l'aide ;
• --base, -b : spécifie un chemin de base alternatif. Par défaut, tous les chemins sont relatifs au Gruntfile. C'est une alternative à grunt.file.setBase(...) ;
• --no-color : désactive la coloration de la sortie de la commande grunt ;
• --gruntfileGruntfile.jsGruntfile.coffee : spécifie un Grunfile alternatif. Par défaut, grunt cherche le fichier Gruntfile.js ou Gruntfile.coffee le plus proche dans le répertoire courant, ou ses parents ;
• --debug, -d : active le mode de débogage pour les tâches qui le supportent ;
• --stack : affiche la stack trace en cas de warning ou d'erreur fatale ;
• --force, -f : force l'exécution en cas de warning ;
• --tasksgrunt.loadTasks(...) : chemins additionnels à scanner pour rechercher des tâches. Alternative à grunt.loadTasks(...) ;
• --npmgrunt.loadTasks(...) : plugins grunt installés avec npm à scanner pour rechercher des tâches. Alternative à grunt.loadTasks(...) ;
• --no-write : désactive l'écriture de fichiers (dry run) ;
• --verbose, -v : mode verbeux. Ajoute des informations en sortie ;
• --version, -V : affiche la version de grunt. Combiner avec --verbose pour obtenir des informations supplémentaires.

Prenons en exemple l'option --helpgrunt. En plus d'afficher de l'aide sur la commande grunt, cette option permet d'afficher la description des tâches contenues dans le Gruntfile et les fichiers JavaScript trouvés dans les répertoires scannés :

module.exports = function(grunt) {
 
  grunt.registerTask('less', 'Compiles LESS to CSS.', function() {
    // ...
  });
 
  grunt.registerTask('minify', 'Minifies JavaScript & CSS files.', function() {
    // ...
  });
 
  grunt.registerTask('deploy', 'Deploys the Web site.', function() {
    // ...
  });
 
  grunt.registerTask('all', 'Does all the stuff.', ['less', 'minify', 'deploy']);
 
}

Il est possible de gérer ses propres options d'exécution. Leur valeur est récupérée via la méthode grunt.option.

module.exports = function(grunt) {
  console.log('log is: ' + grunt.option('log'));
 
  grunt.registerTask('task', function() {
    if (grunt.option('log')===true){
      console.log('just began');
    }
 
    // do some stuff
 
    if (grunt.option('log')===true){
       console.log('just finished');
    }
  });
}

Si aucune valeur n'est spécifiée, la seule présence de l'option lui donne la valeur true. Pour lui donner une autre valeur, il suffit de spécifier la valeur après l'option dans la ligne de commande. Vous pouvez le faire en précédant la valeur d'un espace ou du signe =.

module.exports = function(grunt) {
 
  var logLevels = {
    verbose: 1,
    info: 2,
    warning: 3,
    error: 4
  }
 
  grunt.registerTask('task', function() {
    if (grunt.option('log')<=logLevels.verbose){
      console.log('just began');
    }
 
    try{
      throw new Error('I did bad stuff !');
    }
    catch(e){
      if (grunt.option('log')<=logLevels.error){
        console.log(e);
      }
    }
  });
}

Au fait, les options d'exécution personnalisées… À quoi ça sert ? Les exemples précédents vous orientent. Ça sert à modifier l'exécution de vos tâches de manière occasionnelle. Ici, on a activé des logs optionnels. En mode de fonctionnement normal, on ne va pas activer les logs en mode verbeux, mais plutôt en mode erreur. Plus généralement, la présence ou l'absence d'une option à l'exécution peut, par exemple, conditionner un mode d'exécution optimisé ou un mode debug.