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

Nourdine FALOLA (Soat)

Vous avez tous les tutoriels pour créer vos tâches Grunt, mais savez-vous les lancer ?

Vous apprendrez dans ce tutoriel les différentes façons d'exécuter une tâche avec ou sans option et comment lui passer des arguments.

Commentez

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

- Auteur : Nourdine FALOLA (Soat)

- Parution : 3 juillet 2017

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2016 Nourdine FALOLA. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Piqûre de rappel : où en sommes-nous ?

- II. Que contient ce tutoriel ?

- III. Exécuter des tâches

- III-A. La base : exécution en ligne de commande

- III-B. Alias

- III-C. Lancement programmé

- III-D. Arguments des tâches

- III-E. Options d'exécution

- III-F. Options d'exécution personnalisées

- IV. Et après ?

- V. Remerciements

I - Piqûre de rappel : où en sommes-nous ?

Dans cette série de tutoriels sur Grunt, vous avez pu :

1. Découvrir Grunt dans son ensemble ;

2. Avoir un aperçu de l'API Grunt basée sur celle de node.js ;

3. Comprendre comment configurer les tâches Grunt ;

4. Apprendre à créer des tâches.

Vous êtes donc prêt à lancer vos tâches ! Euh… Oui mais comment ?

II - Que contient ce tutoriel ?

Ce tutoriel vous donne toutes les clés pour comprendre comment exécuter vos tâches Grunt.

Exécuter des tâches

1. La base : exécution en ligne de commande

2. Alias

3. Lancement programmé

4. Arguments des tâches

5. Options d'exécution

6. Options d'exécution personnalisées

III - Exécuter des tâches

III-A - La base : exécution en ligne de commande

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

III-B - Alias

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']);

III-C - Lancement programmé

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.

1. module.exports = function(grunt) {

3. grunt.registerTask('less', 'Compiles LESS to CSS.', function() {

4. // ...

5. });

7. grunt.registerTask('minify', 'Minifies JavaScript & CSS files.', function() {

8. // ...

9. });

11. grunt.registerTask('deployDfs', 'Deploys the Web site via the DFS.', function() {

12. // ...

13. });

15. grunt.registerTask('deployFtp', 'Deploys the Web site via FTP.', function() {

16. // ...

17. });

19. grunt.registerTask('customSequence', 'Does all the stuff.', function(build, mode){

20. if (build==='true'){

21. grunt.task.run('less');

22. grunt.task.run('minify');

23. }

25. if (mode==="ftp"){

26. grunt.task.run('deployFtp');

27. }

28. else if (mode==="dfs"){

29. grunt.task.run('deployDfs');

30. }

31. });

33. }

III-D - Arguments des tâches

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.

1. module.exports = function(grunt) {

2. grunt.registerTask('task', 'Tâche avec arguments?', function() {

3. grunt.log.writeln(this.args);

4. });

5. }

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

1. module.exports = function(grunt) {

2. grunt.initConfig({

3. multiTask: {

4. target1: {

5. },

6. target2: {

7. }

8. }

9. });

11. grunt.registerMultiTask('multiTask', 'Tâche avec arguments?', function() {

12. grunt.log.writeln("target : " + this.target);

13. grunt.log.writeln("arguments : " + this.args);

14. });

15. }

III-E - Options d'exécution

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 :

1. module.exports = function(grunt) {

3. grunt.registerTask('less', 'Compiles LESS to CSS.', function() {

4. // ...

5. });

7. grunt.registerTask('minify', 'Minifies JavaScript & CSS files.', function() {

8. // ...

9. });

11. grunt.registerTask('deploy', 'Deploys the Web site.', function() {

12. // ...

13. });

15. grunt.registerTask('all', 'Does all the stuff.', ['less', 'minify', 'deploy']);

17. }

III-F - Options d'exécution personnalisées

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.

1. module.exports = function(grunt) {

2. console.log('log is: ' + grunt.option('log'));

4. grunt.registerTask('task', function() {

5. if (grunt.option('log')===true){

6. console.log('just began');

7. }

9. // do some stuff

11. if (grunt.option('log')===true){

12. console.log('just finished');

13. }

14. });

15. }

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 =.

1. module.exports = function(grunt) {

3. var logLevels = {

4. verbose: 1,

5. info: 2,

6. warning: 3,

7. error: 4

8. }

10. grunt.registerTask('task', function() {

11. if (grunt.option('log')<=logLevels.verbose){

12. console.log('just began');

13. }

15. try{

16. throw new Error('I did bad stuff !');

17. }

18. catch(e){

19. if (grunt.option('log')<=logLevels.error){

20. console.log(e);

21. }

22. }

23. });

24. }

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.

IV - Et après ?

Nous arrivons au bout de cette série de tutoriels consacrée au lanceur de tâches Grunt. Vous connaissez l'API Grunt et êtes à présent capable de créer, configurer et lancer des tâches.

Dans le dernier tutoriel de cette série, nous allons voir un cas pratique de projet utilisant des tâches Grunt : Twitter Bootstrap.

V - Remerciements

Nous tenons à remercier la société Soat qui nous a autorisés à publier ce tutoriel.

Nous remercions également Winjerome pour la mise au gabarit et Claude Leloup pour la relecture orthographique.