Accueil > Web > Automatisez vos workflows avec Grunt

Automatisez vos workflows avec Grunt

Introduction

Un bon développeur est un développeur fainéant, c’est un dicton bien connu ! Il nous est tous arrivé d’avoir à effectuer de nombreuses tâches répétitives, ou de devoir enchaîner un certain nombre d’opérations dans un ordre précis et de façon récurrente. Qu’il s’agisse de compiler votre CoffeeScript, votre Sass, ou bien de préparer un projet pour une livraison en production, toutes ces opérations entraînent une perte de temps précieuse et surtout une énorme frustration ! Mais c’est là qu’on réalise la magie du web : pour tout ce qui vous énerve, d’autres ont déjà trouvé une solution !

Grunt à la rescousse

GruntC’est là qu’intervient Grunt. Derrière ce nom étrange se cache un lanceur de tâches Javascript. Si cela est peu parlant pour certains, il faut comprendre par là que cet utilitaire en ligne de commande permet tout simplement d’automatiser toutes les tâches possibles et imaginables ! Grunt peut par exemple minifier automatiquement vos fichiers CSS ou Javascript, lancer vos tests, compiler un projet, vérifier la qualité de votre code, … Et pourquoi ne pas faire tout cela en une seule commande ? Telles sont les possibilités offertes par cet outil basé sur Node.js.

C’est un outil particulièrement adapté aux développeurs front-end qui ont souvent à lancer des processus tels que Sass, uglify, … Il est également très utilisé comme outil de build pour définir des workflows communs à tous les développeurs d’un projet et surtout entièrement automatisés.

La communauté autour de Grunt est très active comme le prouvent les 2600+ plugins disponibles actuellement, qui permettent de répondre à la quasi-totalité des besoins que vous pourriez rencontrer. Les exemples abondent sur internet et les réponses sont rapides sur la plupart des sites d’entraide.

Quelques possibilités de Grunt

Pour explorer rapidement les fonctionnalités de Grunt, nous allons nous attarder sur certains de ses plugins les plus connus et envisager les possibilités offertes par chacun. Il faut cependant garder à l’esprit que si aucun plugin ne convient à ce que l’on souhaite faire (ce qui est extrêmement rare), il est toujours possible de définir nos propres tâches personnalisées. Je laisse cependant délibérément de côté l’aspect technique de l’implémentation de ces plugins pour y revenir dans le prochain article.

Grunt JSHint : Ne restez plus bloqué sur des oublis de points-virgules

JSHint est un analyseur de code Javascript capable de détecter pour vous les erreurs et problèmes qui pourraient se poser en vous forçant à respecter des règles précises. Dans Grunt, vous pouvez lancer cette vérification grâce au plugin grunt-contrib-jshint. Bien évidemment, il existe des équivalents pour d’autres langages de programmation, et les plugins Grunt associés également ! Grâce à ce plugin, en une seule commande Grunt indiquera les erreurs dans vos fichiers Javascript. La restitution se fait dans la console sous la forme d’un rapport en couleurs, mais vous pouvez cependant choisir votre reporter ou créer le vôtre.

Minifiez tous vos fichiers Javascript en une seule commande

L’une des tâches les plus rébarbatives est la minification des fichiers Javascript à effectuer avant une mise en production. Grâce à grunt-contrib-uglify, Vous pouvez indiquer à Grunt quels sont les fichiers Javascript à minifier et vous n’aurez plus alors qu’à lancer la tâche correspondante chaque fois que vous voudrez minifier vos fichiers.

Déclenchement automatique de tâches

Les deux plugins précédemment mentionnés sont bien utiles, mais il y a cependant toujours un inconvénient de taille : à chaque modification du code source, vous devez exécuter les tâches correspondantes pour recompiler vos scripts et vérifier la qualité de votre code (ou toute autre tâche que vous pourriez utiliser).

Le plugin grunt-contrib-watch permet de surveiller certains fichiers et d’exécuter automatiquement les tâches de notre choix lorsque ceux-ci sont modifiés (création, édition ou suppression). Avec l’option livereload, ce plugin permet même au navigateur web de se rafraîchir tout seul ! Plus besoin de relancer la compilation de vos sources à chaque modification, celle-ci sera désormais totalement automatique.

Des alternatives ?

Un concurrent émerge face à Grunt, basé sur une philosophie différente : là où Grunt privilégie la configuration au code, Gulp prend le contrepied et privilégie le code. Gulp utilise également les stream, ce qui permet de se rapprocher plus précisément de la notion de workflow, en transmettant directement un flux de fichiers à travers nos différentes tâches. Cela présente un gros avantage par rapport à Grunt où on est bien souvent obligé d’utiliser des fichiers temporaires entre les tâches. Il faut noter cependant que Grunt a prévu de permettre la transmission de flux entre les tâches pour sa prochaine release. Malgré cet avantage certain, il existe aujourd’hui encore beaucoup plus de plugins Grunt que de plugins Gulp, même si les principaux sont disponibles.

Bien que ces deux outils soient des tasks runner et permettent donc de faire à peu près tout, ils sont très souvent utilisés comme outils de build. Dans cette catégorie, il existe de nombreuses alternatives. On pense notamment aux très connus Ant et Maven, ou à d’autres moins connus comme FeZ en Javascript. Ces outils sont très performants et certains peuvent également être utilisés comme lanceurs de tâches, bien que ce ne soient pas leur fonction première dans le monde des projets front-end.

 Conclusion

Nous avons donc pu voir quelques possibilités offertes par Grunt, sans vraiment entrer dans les détails de la mise en place de celui-ci. La configuration de Grunt sera abordée dans un second article plus technique, où nous verrons également comment l’installer. Dans un troisième et dernier article enfin, nous verrons comment créer nos propres tâches Grunt.

Avant d’aborder la suite, il faut savoir qu’il existe en ligne des outils générant des structures de projet contenant des Gruntfile déjà conçus et très utiles. C’est notamment le cas de l’excellent Yeoman qui permet de générer tous types de projets (Angular, Express, Spring, Symfony, la liste est longue !) Les workflows générés dans le Gruntfile sont en général très bien conçus et peuvent être une bonne base pour vos développements, même si vous aurez sûrement besoin de les personnaliser. C’est ce que nous allons apprendre dans l’article suivant.

Categories: Web Tags: , , , ,


− quatre = 2