Utiliser Grunt, premiers pas

Grunt sert à automatiser les tâches répétitives d’un projet, telles la conversion de fichiers SASS en CSS, la minification et la concaténation de fichiers javascript, la compilation si nécessaire comme avec NodeJS, les tests unitaires, l’optimisation des images, etc … Lorsque l’on a configuré les tâches dans un fichier Gruntfile.js, l’exécution de ces tâches s’effectue de façon automatique, sans aucun effort. Grunt est exécuteur de tâches javascript : GRUNT, The Javascript Task Runner.

Le logo Grunt sur fond des meules de Stanage Edge dans le parc national de Peak District en Angleterre au coucher du soleil

Grunt est un système qui fonctionne en javascript sur NodeJS, qui doit donc être installé, ainsi que npm, qui est le gestionnaire de packages pour NodeJS. npm est un retroacronyme signifiant Node Package Manager. Ces lettres ont été choisies car elles se situent à droite sur un clavier qwerty et sont plus simples et rapides à taper.

Environnement

Sur un système Linux, ou un serveur Ubuntu, on installe NojeJS et NPM :

Avec npm, on installe grunt-cli globalement, pour que les commandes grunt soient accessible partout. grunt-cli permet de piloter grunt beaucoup simplement, cli pour Command line.

npm et package.json

Ensuite, on se rend dans le projet, et l’on installe grunt localement. Pour automatiser npm et charger des packages, on crée un fichier package.json avec npm init. Pour l’exemple, monprojet s’appelle clio-search :

On a besoin du module grunt que l’on installe avec npm, l’option --save-dev sert à sauvegarder la dépendance dans le fichier package.json :

Cela crée un dossier node_modules dans le projet qui contient les packages NodeJS donc grunt. Il faudra ignorer ce dossier si l’on utilise git. Cela ajoute à la fin du fichier package.json les lignes :

L’avantage réside dans le fait que seul le fichier package.json, et non le gigantesque dossier node_modules, est nécessaire à l’installation du projet. Avec la commande npm install, le fichier package.json permet de récupérer la liste des modules et de créer le dossier node_modules, permettant ainsi de modifier le projet, les fichiers nécessaires en production étant compilés build.

Le fichier Gruntfile.js

On doit ensuite créer un fichier Gruntfile.js (nom par défaut) qui définit les tâches à effectuer :

Les tâches Grunt

On va commencer par concaténer les fichiers js. Pour cela, on a besoin d’un plugin pour Grunt. La liste des plugins est disponible sur la page https://gruntjs.com/plugins/. Pour concaténer les fichiers js, on a besoin du plugin concat. On trouve le plugin nommé grunt-contrib-concat, les plugins commençant par grunt-contrib sont les plugins développés par l’équipe de Grunt.

On clique sur grunt-contrib-concat, et l’on est redirigé vers la page npm qui explique la procédure à suivre.

La première chose à faire est de l’installer.

Le terminal indique 6 packages are looking for funding, cela montre les équipes qui cherchent des dons pour aider au développement des packages nodeJS, il n’y a rien d’obligatoire.

Ensuite, on copie le code de la tâche à charger et l’exemple d’utilisation dans le fichier Grunfile.js :

On adapte ensuite le code à notre projet. concat: définit la première tâche nommée dist et les options, options: indique le séparateur entre les fichiers js fusionnés, en cas d’oubli, ce qui peut poser problème lors de l’exécution. On peut changer le nom dist en ce que l’on veut, je l’appelle merge. On indique ensuite les sources dans la propriété src des fichiers que l’on souhaite fusionner. On peut se servir de la wildcard *. Mes fichiers js côté admin de WordPress se trouvent dans assets/js/admin. Si l’on veut contrôler l’ordre, on énumère tous les fichiers js dans l’ordre souhaité. La propriété dest est la destination. Je veux l’écrire dans le dossier js et le nommer admin.min.js. Mon fichier Grunfile.js devient alors :

Dans la propriété concat (dont on ne peut pas changer le nom), on peut très bien écrire d’autres tâches, pour la partie frontend par exemple.

Exécution d’une tâche

Pour lancer la tâche, on écrit la commande dans le terminal, et on lance :

On aurait pu lancer directement grunt concat, les tâches à l’intérieur de la propriétés concat auraient été exécutées. Le fichier admin.min.js est créé dans le dossier assets/js. Les fichiers js sont fusionnés, mais pas encore minifiés, ce que l’on va faire avec le plugin Grunt uglify. On va sur la page https://gruntjs.com/plugins/ et l’on ouvre le plugin grunt-contrib-uglify. On installe le plugin sans oublier --save-dev et l’on complète le fichier Gruntfile.js.

Avec plusieurs tâches

Le plugin uglify permet de faire cela en même temps sur une seule tâche, mais l’on voit ainsi comment enchaîner les tâches. On enregistre pour cela une nouvelle tâche, avec la méthode registerTask, que l’on peut nommer default en listant dans l’ordre toutes les tâches à exécuter :

On peut maintenant lancer grunt default. Puisque la tâche s’appelle default, la commande grunt suffit :

Ajustement des plugins

La tâche échoue car le plugin grunt-contrib-uglify n’aime pas les fonctions fléchées de l’ES6. J’ai installé la version la plus récente, on va donc chercher un autre plugin qui pourrait prendre cela en charge. On cherche donc sur le page des plugins de Grunt.

Recherche de uglify sur la page des plugins Grunt

On désinstalle l’ancien plugin grunt-contrib-uglify et l’on installe le nouveau @sailshq/grunt-contrib-uglify en oubliant pas --save-dev.

Maintenant le fichier package.json contient :

On change la tâche npm à charger dans le fichier Gruntfile.js, et on relance grunt :

Le fichier concaténé et minifié est créé.

Et hop, maintenant, on peut inclure un fichier javascript optimisé pour la performance. Grunt peut effectuer des tâches plus complexes telles la mise à jour en temps réel avec un watcher, ou la compilation de fichiers SASS en un seul fichier CSS. On peut également écrire une tâche pour créer un fichier de traduction .pot pour les fonctions i18n de WordPress. Un second article traitera de cela, ainsi que de la validation des fichiers javascript.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.