Grunt, la suite

Dans l’article précédent, Grunt, premier pas, on a vu comment définir une tâche, combiner des tâches, et les lancer. Maintenant, on va approfondir l’utilisation de Grunt, en cherchant de nouveaux plugins, pour améliorer la création des fichiers optimisés pendant le développement du projet.

Le logo Grunt, et le texte Part 2 sur fond de la côte du parc d'état Julia Pfeiffer Burns en Californie

Vérification du code javascript

Un plugin apprécié dans le développement de projet est jshint qui permet de détecter les erreurs et les potentiels problèmes du code javascript, ce qui permettra ensuite de fusionner les sources et minifier le code sans danger. Un exemple est un oubli de point virgule à la fin d’un fichier. Lorsque les fichiers js seront fusionnés, cela risque de poser un problème entre la fin d’un fichier et le début d’un autre, de même entre deux lignes qui ne seraient pas séparées par un point virgule semicolon.

Recherche du plugin Grunt

Comme dans l’article précédent, on va sur la page https://gruntjs.com/plugins/, et l’on recherche jshint. Comme ce plugin fait partie de l’un des plus populaires, on le trouve en première page.

Le lien envoie sur la page https://www.npmjs.com/package/grunt-contrib-jshint du site npmjs.com. On obtient la commande pour installer le plugin dans le répertoire du projet, des exemples et les différentes options pour la configuration de Grunt dans le fichier Gruntfile.js.

Installation de grunt-contrib-jshint

Dans le répertoire du projet, on lance la commande donnée sur la page npm :

Une nouvelle ligne relative au package grunt-contrib-jshint est écrite dans le fichier package.json :

Mise en place uglify

Le fichier Gruntfile.js se complète avec le chargement du plugin et la définition de la tâche :

Par rapport à l’article précédent, on enlève la tâche de concaténation, car la contribution uglify s’en charge. On active jshint, avant la concaténation et la minification pour vérifier l’intégrité du fichier javascript final.

Lancement de la tâche

Puisque la tâche est définie avec le mot clé default, qui est la tâche par défaut, il suffit de lancer la commande grunt dans le répertoire du projet.

De nombreuses erreurs apparaissent avec jshint, les avertissements nous invite à utiliser l’option esversion: 6. Ce que l’on fait en ajoutant l’option à la propriété jshint :

Correction des avertissements et des erreurs

jshint permet de corriger quelques erreurs et oublis de points virgule semicolon. Les variables globales telles ajaxurl, pour WordPress ou $, jQuery sont à préciser, et plus bizarrement console. Il ne faut pas utiliser "use strict" en dehors d’une fonction, cela peut poser des problèmes si l’on fusionne plusieurs fichiers dont certains ne répondent pas aux exigences de cette directive. Sinon on utilise l’option strict, dont les valeurs peuvent être global, implied, false ou true. Les options de jshint deviennent donc :

CS est une variable globale. Et cela passe enfin, le fichier minifié est créé.

Une subtilité, si l’on demande d’écrire le fichier minifié dans le même dossier que les sources, est d’ignorer ce fichier. Si l’on avait écrit le fichier admin.min.js dans le dossier assets/js/admin/ (ce n’est pas le cas, car on l’écrit dans assets/js/). Dans le cas contraire, on écrit la valeur de jshint.all: ['assets/js/admin/*.js', '!assets/js/admin/admin.min.js'] avec le point d’exclamation pour la non prise en compte du fichier minifié. Si le javascript ne fonctionne pas à l’exécution, cela peut être dû au renommage des variables. En ajoutant l’option mangle: true, cela évite ce comportement.

Compilation des styles SASS

La recherche de SASS sur la page https://gruntjs.com/plugins/, nous indique le module grunt-contrib-sass. Ce plugin utilise Ruby et Sass pour compiler les fichiers scss. Or il est dit sur le site SASS que Ruby Sass était l’implémentation originale de Sass, mais qu’il a atteint la fin de sa vie le 26 Mars 2019, et il faut lui préférer une autre implémentation telle que DartSass ou LibSass. On recherche donc des plugins Grunt qui pourraient convenir. Et l’on trouve grunt-sass qui compile Sass en utilisant Dart Sass ou Node Sass. On installe ce module de la même façon que précédemment, en installant également node-sass.

Puisque l’on nous demande d’installer node-sass sur la page npm de grunt-sass, on le fait. Dans le fichier Gruntfile.js, il faut faire un require('node-sass') pour indiquer au module quelle implémentation va être utilisée.

Gruntfile.js final

On modifie alors le fichier Gruntfile.js :

J’appelle la tâche sass-compile, avec deux entrées : admin et front. On utilise la variable sass pour l’implémentation, définie au début de la fonction module.exports(). Je choisis d’écrire des fichiers source map pour le débogage, bien-sûr l’option peut être retirée. Pour tester, je lance la commande pour la partie admin :

Et hop, minification et concaténation des fichiers js, compilation et minification des styles scss, c’est bien parti. Maintenant, il faut relancer la commande grunt pour chaque modification de fichiers, ce qui est assez rébarbatif en mode développement. Dans l’article suivant, on va voir la mise en place d’un watcher qui écoutera tout changement des sources pour lancer automatiquement les tâches Grunt, sans avoir à le faire manuellement.

Soumettre un commentaire

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

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