Gulp vs. Grunt : les ca­rac­té­ris­tiques de ces deux task runners.

En tant que dé­ve­lop­peur Web, vous devez non seulement résoudre des tâches complexes, mais aussi faire face à des processus fas­ti­dieux et ré­cur­rents. Les étapes comme la com­pi­la­tion des fichiers Less, SCSS, CSS demandent beaucoup de temps, mais aussi pas mal d’effort. Pour soulager ces processus, des task runners (ou exé­cu­teurs de tâches) qui au­to­ma­ti­sent ces tâches ont été mis au point afin de soulager les dé­ve­lop­peurs. En par­ti­cu­lier pour les en­vi­ron­ne­ments Ja­vaS­cript, il existe dif­fé­rentes ap­pli­ca­tions, Grunt et Gulp sont les re­pré­sen­tants les plus po­pu­laires. Mais quelles sont les ca­rac­té­ris­tiques de ces deux task runners Ja­vaS­cript et quelles sont les dif­fé­rences entre ces deux outils ?

Un exécuteur de tâches est un programme qui au­to­ma­tise un ou plusieurs processus in­for­ma­tiques, sans ce programme c’est à l’uti­li­sa­teur d’exécuter ma­nuel­le­ment ces processus. Ainsi cette au­to­ma­ti­sa­tion est im­por­tante notamment pour les tâches qui doivent être exécutées à plusieurs reprises. En op­ti­mi­sant le flux de travail, un task runner permet d’éco­no­mi­ser un temps précieux qui peut alors être consacré à d’autres tâches. Les dif­fé­rentes solutions se dis­tin­guent prin­ci­pa­le­ment par leur pro­gram­ma­tion et leur fonc­tion­ne­ment interne. En tant qu’uti­li­sa­teur, vous gardez toujours le contrôle sur les étapes de travail que vous souhaitez voir exécuter par l’outil et choi­sis­sez celles qui ne le sont pas.

Ces outils pratiques jouent un rôle par­ti­cu­liè­re­ment important dans le dé­ve­lop­pe­ment Web : les dé­ve­lop­peurs front-end sont con­fron­tés au quotidien au défi d’exécuter des processus simples mais ré­cur­rents comme la com­pi­la­tion des feuille de style des pré­pro­ces­seurs (Less, Sass, SCSS) en CSS terminé ou la mi­ni­fi­ca­tion (réduction de la taille) du code Ja­vaS­cript. Tester la fonc­tion­na­lité des dif­fé­rents modules demande souvent beaucoup trop de temps. Ainsi, des solutions pour sim­pli­fier le flux de travail sont donc in­dis­pen­sables. Les task runners Ja­vaS­cript, qui sont cons­truits sur une base Node.js sont devenus par­ti­cu­liè­re­ment po­pu­laires afin d’au­to­ma­ti­ser les processus res­pec­tifs. Les pos­si­bi­li­tés d’au­to­ma­ti­sa­tion des dif­fé­rents pro­grammes peuvent être étendues grâce à de nombreux plugins.

Il existe dif­fé­rents types d’exé­cu­teurs de tâches pour les en­vi­ron­ne­ments Ja­vaS­cript, qui diffèrent prin­ci­pa­le­ment par la manière dont l’au­to­ma­ti­sa­tion d’un processus est initiée. D’une part, il y a des pro­grammes qui ont le code né­ces­saire dès le début pour exécuter les processus cor­res­pon­dants. Dans ce cas, l’uti­li­sa­teur configure sim­ple­ment les tâches qu’il veut laisser exécuter sans avoir à traiter di­rec­te­ment avec le code du programme. D’autre part, il existe des task runners Ja­vaS­cript, qui placent la pro­gram­ma­tion au premier plan et offrent ainsi aux uti­li­sa­teurs beaucoup plus de liberté dans la création de leurs propres scripts d’au­to­ma­ti­sa­tion.

Les ap­pli­ca­tions les plus connues sont Broccoli.js et Brunch, mais avant tout Gulp et Grunt. Ces deux dernières ap­pli­ca­tions, sont dé­tail­lées ci-dessous en listant leurs si­mi­li­tudes et leurs dif­fé­rences.

En 2012, le dé­ve­lop­peur Ja­vaS­cript Ben Alman a publié le task runner en ligne de commande Grunt, qu’il dirige et développe avec une petite équipe. Le code du programme, qui est sous licence libre MIT, peut être té­lé­chargé à partir du site officiel et est également dis­po­nible gra­tui­te­ment sur la pla­te­forme de dé­ve­lop­pe­ment GitHub. Comme tous les outils com­pa­rables, Grunt est basé sur l’en­vi­ron­ne­ment d’exécution Ja­vaS­cript Node.js et possède sa propre interface de ligne de commande avec grunt-cli, qui, comme le task runner lui-même peut être installé via le ges­tion­naire de paquets npm (Node Package Manager).

Pour intégrer Grunt dans un projet Web, deux fichiers doivent sim­ple­ment être ajoutés au ré­per­toire racine du projet. Nor­ma­le­ment, le fichier package.json contient toutes les mé­ta­don­nées per­ti­nentes sur les tâches qui peuvent être au­to­ma­ti­sées, comme le nom, la version, la licence, ou les fonctions associées. Le fichier Grunt, dis­po­nible en Ja­vaS­cript valide (gruntfile.js) ou en Cof­feeS­cript (gruntfile.coffee), contient le code utilisé pour intégrer et con­fi­gu­rer les dif­fé­rents modules de tâches. Les modules, aussi appelés plugins, sont également installés via le ges­tion­naire de paquets npm déjà mentionné.

Le ré­per­toire officiel des plugins contient plus de 6000 tâches Grunt dif­fé­rentes pour des buts dis­pa­rates. Par exemple, grunt-contrib-clean (nettoyage des fichiers et des dossiers), grunt-contrib-cssmin (mi­ni­fi­ca­tion CSS) ou grunt-contrib-connect (démarrage d’un serveur Web local). Beaucoup de ces plugins ne sont rien d’autre que des in­ter­faces vers des outils autonomes. Par exemple, grunt-contrib-uglify, vous permet de contrôler le mi­ni­fi­ca­teur Ja­vaS­critp UglifyJS à partir du fichier Grunt.

En plus de la pos­si­bi­lité de modifier ou d’étendre les tâches exis­tantes, les dé­ve­lop­peurs ex­pé­ri­men­tés peuvent aussi créer leurs propres modules d’au­to­ma­ti­sa­tion afin d’adapter de manière optimale le task runner à leurs propres besoins.

En juillet 2013, la société amé­ri­caine de logiciels Fractal In­no­va­tions, en coo­pé­ra­tion avec la com­mu­nauté Github, a lancé sur le marché la première version du task runner libre Gulp . Comme mentionné pré­cé­dem­ment avec Grunt, le programme est aussi sous licence open source MIT. Il est basé sur la pla­te­forme Ja­vaS­cript Node.js et utilise le ges­tion­naire de paquets npm, tout comme son con­cur­rent. La structure entre Grunt et Gulp diffère bien peu : Gulp est aussi un outil en ligne de commande et dispose donc d’une interface uti­li­sa­teur ap­pro­priée avec gulp-cli. De plus, le fichier de con­fi­gu­ra­tion package.json et le fichier Gulp (gulpfile.js), qui énumèrent les tâches possibles, sont gé­né­ra­le­ment utilisés. Si les deux sont ajoutés au ré­per­toire Web, le task runner peut être utilisé pour l’op­ti­mi­sa­tion du workflow.

Le fichier Gulp, qui ne contient que du Ja­vaS­cript, résume les opé­ra­tions des fichiers in­di­vi­duels avant qu’ils puissent être diffusés via le module Node.js stream, peut donc être exécuté. La plupart des processus stream in­di­vi­duels s’exécutent en mémoire avant que le résultat ne soit réécrit dans les fichiers res­pec­tifs à la fin, limitant ainsi l’uti­li­sa­tion de fichiers. C’est pourquoi le task runner se distingue par une ex­cel­lente per­for­mance. Comme les tâches sont pro­gram­mées mais pas con­fi­gu­rées dès le début, un savoir-faire avec Node.js et avec Ja­vaS­cript est né­ces­saire pour pouvoir utiliser aisément Gulp. Pour les pro­fes­sion­nels, cela signifie beaucoup de liberté mais cela est aussi associé à un potentiel d’erreur plus élevé.

Il existe aussi pour Gulp de nom­breuses tâches pré­dé­fi­nies sous forme de plugin. Le ré­per­toire officiel sur gulpjs.com contient plus de 3000 ex­ten­sions dif­fé­rentes comme gulp-jekyll (com­pi­la­tion de projets Jekyll), gulp-php-minify (op­ti­mi­sa­tion des codes PHP) ou gulp-css­myi­cons (con­ver­sion des icônes SVG en CSS).

A première vue, Grunt et Gulp ne semblent pas très dif­fé­rents l’un de l’autre : les deux outils d’au­to­ma­ti­sa­tion sont sous licence MIT, c’est pourquoi le code source est libre et ouvert. Les deux ap­pli­ca­tions peuvent être con­trô­lées via la ligne de commande et disposent aussi de leur propre interface installée à cet effet. Avec npm, les exé­cu­tants de tâches utilisent aussi le même ges­tion­naire de paquets. Grâce à leurs grands ré­per­toires de plugins, Gulp et Grunt peuvent fa­ci­le­ment au­to­ma­ti­ser un grand nombre de tâches. S’il n‘ y a pas encore d’extension pour le processus désiré, vous pouvez le pro­gram­mer vous-même avec l’un ou l’autre outil, bien que les deux exé­cu­teurs de tâches né­ces­si­tent des con­nais­sances en Ja­vaS­cript et Node.js en raison de leur structure.

Alors que Gulp utilise prin­ci­pa­le­ment le module Node.js stream, Grunt utilise prin­ci­pa­le­ment le module fs (file system soit « fichier système »), ce qui est une des dif­fé­rences les plus im­por­tantes entre les deux outils : Grunt est stric­te­ment orienté fichier et crée ini­tia­le­ment des fichiers tem­po­raires et des fichiers locaux dans le cadre de l’exécution des tâches. Alors que Gulp, gère les processus via la mémoire prin­ci­pale et les écrits im­mé­dia­te­ment dans le fichier cible, ce qui donne au programme un avantage au niveau de la vitesse.

Une deuxième dif­fé­rence est le concept respectif des deux solutions. La pro­gram­ma­tion de Grunt donne une direction à l’uti­li­sa­teur : les tâches terminées y sont déjà définies et n’ont qu’à être con­fi­gu­rées. En com­pa­rai­son, Gulp donne beaucoup plus d’espace à la pro­gram­ma­tion in­dé­pen­dante en ne mettant à dis­po­si­tion que les com­po­sants in­di­vi­duels. D’une part, cela facilite la com­pré­hen­sion de l’arrière-plan et des in­ter­re­la­tions, mais d’autre part, cela exige aussi plus d’effort et de con­nais­sances de la part des uti­li­sa­teurs. Plus un projet est grand, plus les forces de Gulp entrent en jeu, c’est pourquoi le nouveau task runner est devenu le premier choix pour beaucoup de projets. Cependant, grâce à une prise en main facile et une uti­li­sa­tion simple, Grunt a toujours un avantage pour des projets plus petits et plus fa­ci­le­ment gérables.