BT

Grunt : le JavaScript se “build”

Écrit par Matthieu Lux le 10 juin 2013 |

Grunt se présente aujourd’hui comme l’outil indispensable du build JavaScript aussi bien pour le Web que pour les projets JavaScript côté serveur. Il apporte aux projets JavaScript de la structure et une harmonisation qui donne du crédit à tout l’écosystème JavaScript.

Il est très fédérateur puisqu’il rassemble des mondes très différents tels que celui du Web et de NodeJS, mais aussi celui du build, de l’intégration continue, des tests unitaires ou encore de la qualité de code.

Le projet Grunt représente, à lui seul, de nombreuses particularités des projets JavaScript. Simplicité, jeunesse, adoption exponentielle, efficacité... Le détailler permet d’avoir un bon aperçu d’un écosystème en plein essor.

Grunt en pratique

Le JavaScript est un langage de script non compilé. Les autres technologies du Web (CSS et HTML) ne le sont pas non plus. Ainsi, on a longtemps pensé qu'il suffisait de copier les fichiers au bon endroit pour livrer un site Web.

La gestion du build JavaScript a de ce fait pris son temps pour émerger. Mais les projets Node.js apparaissant et les interfaces Web se complexifiant, des besoins d'intégrations importants sont apparus.

Grunt peut répondre à tous ces besoins à travers la richesse de ses plugins. Pour tenter d'en fournir un aperçu, en voici quelques catégories :

Qualité de code

Il existe des plugins pour tous les outils d'analyse du code JavaScript tels que JSHint, JSLint, etc... En automatiser l'utilisation ne peut qu'être conseillé.

Tests

Les outils de tests sont maintenant très complets et il est très aisé de les automatiser avec Grunt. Pour les adeptes de NPM, Grunt se positionne très facilement derrière l'appel à "npm test".

Langages

Aussi bien le JavaScript que le CSS (et plus modestement l'HTML) connaissent l'apparition de "meta langages" ou langages transpilés : un langage qui permet d'écrire le code plus simplement pour qu'il soit ensuite transpilé dans le langage cible.

Pour le JavaScript, on citera principalement CoffeeScript et TypeScript (Dart est un peu différent) et pour le CSS : Less et Compass.

Grunt permet d'automatiser la transpilation de ces langages. Il permet même de le faire à chaud à chaque modification des fichiers afin de simplifier le processus de développement.

Web

L'usage le plus courant est celle des tâches du Web. En plus des langages transpilés, un site Web optimisé demande aujourd'hui la concaténation de la plupart des fichiers, "minification" du JavaScript, etc... Des plugins très adaptés à ces manipulations existent pour Grunt.

Intégration continue

Le besoin d’intégrer le build Grunt dans une intégration continue revient souvent. Peu de choses sont prévues à cet effet, mais cela n'est pas très difficile à mettre en place pour autant.

Il faut que le serveur d'intégration puisse exécuter du Node.js et lancer les commandes. La plupart des plugins pour les tests unitaires savent générer des rapports compréhensibles pour les serveurs d'intégration.

Réponse simple et pragmatique à un problème identifié

Le JavaScript aborde l’une après l’autre toutes les problématiques de la construction d’une plateforme complète de développement. Le plus souvent ces problématiques ont déjà été adressées sur les autres plateformes et l’approche est d’essayer d’en tirer les leçons tout en conservant les forces de la plateforme.

C’est exactement le cas de Grunt qui se propose comme la version JavaScript des outils de build tel que Make, Rake, Ant ou encore Maven.

Il le propose en allant droit à l’essentiel. Grunt va simplement centraliser les configurations des modules externes puis y faire appel dans l’ordre configuré. La configuration se fait en JavaScript dans un fichier “Gruntfile.js” positionné à la racine du projet.

Peu de ligne de code

Grunt ne fait pas grand-chose et ne s’en cache pas, ou plutôt, il en est fier. Pour donner une idée, le projet Grunt fait environ 2600 lignes de code quand Maven en fait 55 000 !

Tout est dit dans l’entête du site, Grunt est “The JavaScript Task Runner”. Il est là pour exécuter des tâches décrites en JavaScript, tout le reste est contenu dans les plugins.

Un nombre de lignes de code restreint est très représentatif des librairies JavaScript. ExpressJS présenté comme “LE” framework Web de NodeJS présente une API très simple qui revient le plus souvent à un enchaînement de ce type de lignes :

var express = require('express');
var app = express();

app.get('/', function(req, res){
 res.send('hello world');
});

app.listen(3000);

Et c’est pourtant avec cette même API qu’ExpressJS réussi à combler les besoins des sites les plus exigeants : http://expressjs.com/applications.html

Il est intéressant également de citer BackboneJS, un des frameworks Web côté client les plus utilisés et qu’on a plaisir à découvrir directement via son code source, tellement il est court et lisible. http://backbonejs.org/docs/backbone.html

Modulaire et extensible

Bien sûr, Grunt est un peu plus que 2600 lignes de codes. Il est ultra modulaire. Il s’appuie largement sur le système de paquets de NodeJS : NPM (Node Packet Manager). En effet, même la page du site qui liste les plugins existants fait en réalité appel à l’API de gestion des modules NPM http://gruntjs.com/plugins

Les plugins de Grunt sont de simple modules NodeJS qui doivent exporter une fonction. Cette fonction sera appelée avec l’objet Grunt en paramètre. Il n’y a plus qu’à faire appel à la fonction register[Multi]Task.

grunt.registerMultiTask('log', 'Log stuff.', function() {
 grunt.log.writeln(this.target + ': ' + this.data);
});

Produit du Cloud

Grunt a été proposé par Ben Alman qui travaille chez Bocoup une société américaine qui travaille dans le Web Open Source. Le projet a ensuite reçu des contributions importantes de la part de nombreux acteurs du Cloud dont on peut au moins citer Google. En effet, à travers le projet Yeoman, de nombreux membres de l'équipe "Chrome Dev Relation" ont contribué à Grunt pour qu'il puisse s'adapter à leurs besoins.

Cela fait de Grunt également un produit du Cloud pour le Cloud où les principes de la collaboration Open Source fonctionnent à plein régime. Le projet a toujours été sur GitHub, la société à l'origine n'a pas hésité à le publier. Les autres acteurs du Cloud, parfois même concurrent, s’en sont ensuite approprié et l’ont fait évolué.

L'ultra modularité et le périmètre très borné de ses fonctionnalités sont peut-être ici la clé de la coopération. Il n'y aura jamais besoin de débattre sur les orientations politiques de l'outil tant les limites sont simples et définies.

Adoption exponentielle

L'écosystème JavaScript n'en a certainement pas l'exclusivité mais l'adoption de Grunt est également le reflet de la réussite explosive des meilleurs modules Node.js.

Il n'y a qu’un an, chaque projet JavaScript gérait ses tâches de build avec des outils différents, Le plus souvent, chaque projet essayait d'utiliser un outil de build d'une autre plateforme et l'adaptait aux particularités d'un projet JavaScript.

Aujourd'hui, il est déjà utilisé officiellement chez Twitter, Adobe ou sur le projet jQuery, mais il suffit de consulter les sources sur GitHub des projets JavaScript pour trouver un fichier Gruntfile.js à la racine de la plupart d'entre eux. Tous apprécient d'utiliser un outil cohérent avec le projet et qui propose les tâches adaptées.

Mise en œuvre au-delà des limites prévues

C'est un sujet assez délicat. Comme nous l'avons vu plus haut, le projet Grunt en lui-même ne sortira certainement pas des limites qu'il s'est fixé.

Il reste tout de même une solution qui permet d'en dépasser les limites prévues, c'est d'avoir une API suffisamment souple pour que les plugins puissent le faire. Et s'il y a bien un langage qui peut permettre ce genre de souplesse, c'est le JavaScript.

Il existe déjà une telle mise en œuvre de la souplesse de Grunt : il s'agit du serveur de développement de Yeoman. À travers une collection de tâches Grunt, Yeoman arrive à démarrer un serveur Web qui permet de tester les développements en cours tout en assurant la compilation à la volée des fichiers sources et en automatisant le rechargement de la page par le navigateur.

Il n'est pas possible de rentrer ici dans les détails des mécanismes mis en œuvre pour en arriver là, mais il est aisé de s'imaginer que Grunt ne fait que lancer du JavaScript dans Node.js et qu'un tel serveur n'est finalement pas difficile à implémenter avec Node.js

Conclusion

Grunt est un projet très excitant de la communauté JavaScript. Il remplit un besoin évident et croissant qui n'était pas adressé. Il apporte une structure et une certaine dose de normalisation à un écosystème en ébullition.

Mais il réussit à faire tout cela en conservant les valeurs de la communauté JavaScript : Open Source, modulaire, extensible et par-dessus tout : simple !

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Contenu Éducatif

Rien ne serait possible sans le soutien et la confiance de nos Sponsors Fondateurs:

AppDynamics   CloudBees   Microsoft   Zenika
Feedback Général
Bugs
Publicité
Éditorial
InfoQ.com et tous les contenus sont copyright © 2006-2014 C4Media Inc. InfoQ.com est hébergé chez Contegix, le meilleur ISP avec lequel nous ayons travaillé.
Politique de confidentialité
BT