Gulp vs. Grunt : les caractéristiques de ces deux task runners.

En tant que développeur Web, vous devez non seulement résoudre des tâches complexes, mais aussi faire face à des processus fastidieux et récurrents. Les étapes comme la compilation des fichiers Less, SCSS, CSS demandent beaucoup de temps, mais aussi pas mal d’effort. Pour soulager ces processus, des task runners (ou exécuteurs de tâches) qui automatisent ces tâches ont été mis au point afin de soulager les développeurs. En particulier pour les environnements JavaScript, il existe différentes applications, Grunt et Gulp sont les représentants les plus populaires. Mais quelles sont les caractéristiques de ces deux task runners JavaScript et quelles sont les différences entre ces deux outils ?

Un exécuteur de tâches est un programme qui automatise un ou plusieurs processus informatiques, sans ce programme c’est à l’utilisateur d’exécuter manuellement ces processus. Ainsi cette automatisation est importante notamment pour les tâches qui doivent être exécutées à plusieurs reprises. En optimisant le flux de travail, un task runner permet d’économiser un temps précieux qui peut alors être consacré à d’autres tâches. Les différentes solutions se distinguent principalement par leur programmation et leur fonctionnement interne. En tant qu’utilisateur, vous gardez toujours le contrôle sur les étapes de travail que vous souhaitez voir exécuter par l’outil et choisissez celles qui ne le sont pas.

Ces outils pratiques jouent un rôle particulièrement important dans le développement Web : les développeurs front-end sont confrontés au quotidien au défi d’exécuter des processus simples mais récurrents comme la compilation des feuille de style des préprocesseurs (Less, Sass, SCSS) en CSS terminé ou la minification (réduction de la taille) du code JavaScript. Tester la fonctionnalité des différents modules demande souvent beaucoup trop de temps. Ainsi, des solutions pour simplifier le flux de travail sont donc indispensables. Les task runners JavaScript, qui sont construits sur une base Node.js sont devenus particulièrement populaires afin d’automatiser les processus respectifs. Les possibilités d’automatisation des différents programmes peuvent être étendues grâce à de nombreux plugins.

Il existe différents types d’exécuteurs de tâches pour les environnements JavaScript, qui diffèrent principalement par la manière dont l’automatisation d’un processus est initiée. D’une part, il y a des programmes qui ont le code nécessaire dès le début pour exécuter les processus correspondants. Dans ce cas, l’utilisateur configure simplement les tâches qu’il veut laisser exécuter sans avoir à traiter directement avec le code du programme. D’autre part, il existe des task runners JavaScript, qui placent la programmation au premier plan et offrent ainsi aux utilisateurs beaucoup plus de liberté dans la création de leurs propres scripts d’automatisation.

Les applications les plus connues sont Broccoli.js et Brunch, mais avant tout Gulp et Grunt. Ces deux dernières applications, sont détaillées ci-dessous en listant leurs similitudes et leurs différences.

En 2012, le développeur JavaScript 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 disponible gratuitement sur la plateforme de développement GitHub. Comme tous les outils comparables, Grunt est basé sur l’environnement d’exécution JavaScript 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 gestionnaire de paquets npm (Node Package Manager).

Pour intégrer Grunt dans un projet Web, deux fichiers doivent simplement être ajoutés au répertoire racine du projet. Normalement, le fichier package.json contient toutes les métadonnées pertinentes sur les tâches qui peuvent être automatisées, comme le nom, la version, la licence, ou les fonctions associées. Le fichier Grunt, disponible en JavaScript valide (gruntfile.js) ou en CoffeeScript (gruntfile.coffee), contient le code utilisé pour intégrer et configurer les différents modules de tâches. Les modules, aussi appelés plugins, sont également installés via le gestionnaire de paquets npm déjà mentionné.

Le répertoire officiel des plugins contient plus de 6000 tâches Grunt différentes pour des buts disparates. Par exemple, grunt-contrib-clean (nettoyage des fichiers et des dossiers), grunt-contrib-cssmin (minification CSS) ou grunt-contrib-connect (démarrage d’un serveur Web local). Beaucoup de ces plugins ne sont rien d’autre que des interfaces vers des outils autonomes. Par exemple, grunt-contrib-uglify, vous permet de contrôler le minificateur JavaScritp UglifyJS à partir du fichier Grunt.

En plus de la possibilité de modifier ou d’étendre les tâches existantes, les développeurs expérimentés peuvent aussi créer leurs propres modules d’automatisation afin d’adapter de manière optimale le task runner à leurs propres besoins.

En juillet 2013, la société américaine de logiciels Fractal Innovations, en coopération avec la communauté Github, a lancé sur le marché la première version du task runner libre Gulp . Comme mentionné précédemment avec Grunt, le programme est aussi sous licence open source MIT. Il est basé sur la plateforme JavaScript Node.js et utilise le gestionnaire de paquets npm, tout comme son concurrent. 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 utilisateur appropriée avec gulp-cli. De plus, le fichier de configuration package.json et le fichier Gulp (gulpfile.js), qui énumèrent les tâches possibles, sont généralement utilisés. Si les deux sont ajoutés au répertoire Web, le task runner peut être utilisé pour l’optimisation du workflow.

Le fichier Gulp, qui ne contient que du JavaScript, résume les opérations des fichiers individuels avant qu’ils puissent être diffusés via le module Node.js stream, peut donc être exécuté. La plupart des processus stream individuels s’exécutent en mémoire avant que le résultat ne soit réécrit dans les fichiers respectifs à la fin, limitant ainsi l’utilisation de fichiers. C’est pourquoi le task runner se distingue par une excellente performance. Comme les tâches sont programmées mais pas configurées dès le début, un savoir-faire avec Node.js et avec JavaScript est nécessaire pour pouvoir utiliser aisément Gulp. Pour les professionnels, cela signifie beaucoup de liberté mais cela est aussi associé à un potentiel d’erreur plus élevé.

Il existe aussi pour Gulp de nombreuses tâches prédéfinies sous forme de plugin. Le répertoire officiel sur gulpjs.com contient plus de 3000 extensions différentes comme gulp-jekyll (compilation de projets Jekyll), gulp-php-minify (optimisation des codes PHP) ou gulp-cssmyicons (conversion des icônes SVG en CSS).

A première vue, Grunt et Gulp ne semblent pas très différents l’un de l’autre : les deux outils d’automatisation sont sous licence MIT, c’est pourquoi le code source est libre et ouvert. Les deux applications peuvent être contrôlées via la ligne de commande et disposent aussi de leur propre interface installée à cet effet. Avec npm, les exécutants de tâches utilisent aussi le même gestionnaire de paquets. Grâce à leurs grands répertoires de plugins, Gulp et Grunt peuvent facilement automatiser un grand nombre de tâches. S’il n‘ y a pas encore d’extension pour le processus désiré, vous pouvez le programmer vous-même avec l’un ou l’autre outil, bien que les deux exécuteurs de tâches nécessitent des connaissances en JavaScript et Node.js en raison de leur structure.

Alors que Gulp utilise principalement le module Node.js stream, Grunt utilise principalement le module fs (file system soit « fichier système »), ce qui est une des différences les plus importantes entre les deux outils : Grunt est strictement orienté fichier et crée initialement des fichiers temporaires 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 principale et les écrits immédiatement dans le fichier cible, ce qui donne au programme un avantage au niveau de la vitesse.

Une deuxième différence est le concept respectif des deux solutions. La programmation de Grunt donne une direction à l’utilisateur : les tâches terminées y sont déjà définies et n’ont qu’à être configurées. En comparaison, Gulp donne beaucoup plus d’espace à la programmation indépendante en ne mettant à disposition que les composants individuels. D’une part, cela facilite la compréhension de l’arrière-plan et des interrelations, mais d’autre part, cela exige aussi plus d’effort et de connaissances de la part des utilisateurs. 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 utilisation simple, Grunt a toujours un avantage pour des projets plus petits et plus facilement gérables.