Grunt, mode developpement

L’article précédent traite de la concaténation des fichiers javascript et Sass à l’aide de Grunt et de différents modules. Cela fonctionne très bien et l’on peut générer des fichiers concaténés et minifier pour le mode production, c’est-à-dire lorsque le développeur ne fait plus de modifications. Cependant, en mode développement, les modifications et les débogages par affichage sont très fréquents. La relance, en ligne de commande, de grunt peut devenir rébarbative, pénible, et un mot très, trop à la mode, chronophage.

Le logo Grunt avec les textes Development Mode et Watcher sur fond d'un paysage rural et vallonné au crépuscule

Il existe cependant un plugin Grunt qui permet d’exécuter des tâches à chaque fois que des fichiers définis dans certains chemin sont ajoutés, modifiés ou supprimés. Ce plugin est grunt-contrib-watch. Grunt lance un watcher qui écoute un port du serveur et relance des actions prédéfinies en cas de tout changement des sources écoutées. On cherche donc le module sur la page des plugins de Grunt. Le lien nous envoie sur la page npmjs du module grunt-contrib-watch.

Page npmjs.com de grunt-contrib-watch

Installation

Comme précédemment, on installe le module à l’aide la commande donnée :

Les dépendances du fichiers package.json se sont enrichies d’une ligne :

Architecture des assets

Il y a donc quatre fichiers « globaux » à créer : admin/styles.min.css, front/styles.min.scss, admin/admin.min.js et front/front.min.js.

Structure des tâches

Il faut faire attention aux tâches qui vont être relancées. Si l’on modifie un fichier js, il ne sert à rien de lancer une recompilation des fichiers scss, et inversement. On va donc enregistrer de nouvelles tâches afin de ne relancer qu’une compilation pour un certain type de fichiers, s’ils se trouvent sur la partie admin ou sur le front.

La structure que l’on doit indiquer pour une tâche est donnée en exemple sur la page du module grunt-contrib-watch et a la structure suivante :

  • scripts est le nom de la sous-tâche et peut être changée
  • files sont les fichiers à surveiller,
  • tasks sont: les tâches à lancer en cas de changement,
  • options sont les différentes options, dont la liste est disponible sur la page du module grunt-contrib-watch.

On va donc créer 4 sous-tâches, pour réaliser la surveillance et la recompilation des sources js et scss, du frontend et du backend.

On a défini, dans les articles précédents, des tâches jshint et uglify uniquement pour la partie admin, on le fait également pour la partie frontend.

Gruntfile.js final

En remettant tout ensemble, et en définissant une tâche watch afin de permettre l’exécution du watcher avec la commande npm run watch. Les tâches jshint.front, jshint.admin, uglify.front et uglify.admin sont redéfinies, le fichier Gruntfile.js se présente ainsi :

Débuguer Gruntfile.js

Lorsque l’on oublie une virgule ou autre dans un fichier Gruntfile.js, le message d’erreur affiché dans la console peut être très succinct. En ajoutant l’option -v verbose, la console renvoie l’erreur et surtout la ligne où elle se produit.

Là, on voit une erreur qui se produit en ligne 36, c’est l’oubli d’une virgule après la définition d’une propriété. Cela arrive souvent lorsque l’on ajoute les propriétés des tâches ainsi que l’oubli d’une accolades fermante }.

En ajoutant l’option -h help, à la fin de la liste des options, on doit obtenir la liste des tâches disponibles available tasks.

L’option -d debug indique la tâche source utilisée

Scripts du package.json

Le fichier package.json contient les informations pour npm. La propriété scripts contient les informations pour la commande npm run. Ainsi, on complète cette propriété de la façon suivante :

En exécutant npm run build, la compilation finale est lancée. En lançant npm run watch, on lance le watcher et l’on peut faire des modifications sur le code, les fichiers minifiés css et js sont automatiquement mis à jour.

Exécution du watcher

On lance la commande npm run watch :

On obtient une erreur dans la tâche jshint:front qui n’est pas exécutée sur les fichier js. En regardant les docs, en tombant sur une réponse sur stackoverflow, je change la propriété all dans la tâche jshint:front :

Et là, cela passe, je mets +1 au gars qui a donné cette réponse. Ce n’était pas évident dans la documentation de npmjs grunt-contrib-jshint.

Correction des erreurs jshint

Et l’on recommence en changeant un fichier js du front, on retombe sur des erreurs de semicolon point virgule qui n’avait pas été testé précédemment. On corrige, pendant que le watcher est lancé et l’on sauvegarde à nouveau le fichier. Plus d’erreurs, le js minifié est créé :

Lorsque le watcher est lancé, on perd la main dans le terminal. Pour arrêter le processus, on utilise le raccourci Ctrl+C. Pour corriger les erreurs jshint, pas besoin d’arrêter le watcher, on corrige et l’on sauvegarde.

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.