Optimiser votre développement avec Grunt

Grunt - Javascript taskrunner !

Derrière ce nom barbare se cache un task runner ou autrement dit un outil d'exécution de commande en javascript.
Si vous intégrez des sites internet, il vous arrive très souvent de faire des tâches répétitives et fastidieuses qui prennent du temps et d'utiliser tout un tas d'outils différents pour concaténer vos fichiers js, les minifier, transformer vos fichiers .scss en css, optimiser vos images ... etc.

Ce que vous propose Grunt c'est de regrouper toutes ces tâches au même endroit et surtout de les effectuer automatiquement uniquement lorsque vous en avez besoin.

Utiliser Grunt devient alors un gain de temps et de performance. De plus Grunt est compatible mac, windows & linux !

Ok je suis convaincu(e), j'installe Grunt !

Il faut savoir que pour Grunt, chaque action (concaténer, minifier ...etc) est une tâche et chaque tâche est gérée par un plugin.
Même si vous n'y connaissez rien en ligne de commande, Grunt est très facile d'utilisation et après quelques minutes de configuration, vous n'aurez plus envie de faire un projet sans Grunt 😉

Si vous voulez installer Grunt, il y a quelques pré-requis.

Une fois que vous avez intallé ces programmes, il suffit de taper dans votre terminal la commande suivante : npm install -g grunt-cli.
Ceci installe une fois pour toutes Grunt dans votre machine -g voulant dire global et cli voulant dire command line interface qui ajoute donc grunt à vos lignes de commande !

Deux fichiers sont alors requis dans chaque projet où vous voulez utiliser Grunt.

Il y a tout d'abord un fichier de configuration : package.json qui devra contenir au minimum un nom, une version et des dépendances.

Pour créer ce fichier, deux possibilités s'offrent à vous, soit vous le faites vous-même soit vous exécutez la commande npm init qui va générer automatiquement ce fichier de configuration.

Installer Grunt

Il faudra ensuite exécuter la commande npm install grunt --save-dev pour enregistrer la dépendance grunt.

Dans ce fichier il y a trois éléments essentiels, le nom de votre projet, la version et les dépendances qui sont en fait des plugins que vous allez installer.

Package.json

Ce fichier, une fois qu'il est crée, vous le laissez dans un coin et vous ne le touchez plus ! Il se mettra à jour automatiquement dés que vous installerez un plugin.
Il vous faudra simplement faire la commande npm install pour pouvoir créer le dossier node_modules qui contiendra chaque dépendance que vous allez utiliser.

Et enfin le fichier le plus important où toute la magie va opérer : Gruntfile.js

Configuration d'une tâche

Ce fichier JS relié à package.json va alors permettre à Grunt de lancer des tâches.
Il se compose en trois étapes, tout d'abord il va falloir configurer la tâche puis la charger et enfin l'enregistrer dans une tâche pour pouvoir l’appeler.

Ici vous pouvez voir la tâche de concaténation qui est en fait le plugin grunt-contrib-concat, on lui indique dans src les fichiers à concaténer et dans dest le fichier qu'il va créer qui contiendra les fichiers concaténés. Ensuite, grâce à la fonction loadNpmTasks nous chargeons la tâche et avec registerTask nous l'enregistrons pour pouvoir l'utiliser lorsqu'on l'on exécute grunt dans le terminal.

Chaque plugin s'installe avec la commande suivante : npm install grunt-Nom-du-plugin --save-dev et ensuite il suffit de le configurer dans le fichier Gruntfile.js en se servant de la documentation de celui-ci.

Par exemple pour installer le plugin sass il faut faire cette commande :
Installer le plugin sass

Vous devrez alors avoir cette arborescence :

Dossiers pour Grunt

Un outil extrêmement puissant

Chaque tâche est un plugin et il en existe pour à peu près toutes les choses les plus basiques liées au développement web.
Vous trouverez la liste des plugins officiels ici : http://gruntjs.com/plugins

Voici une liste non exhaustive de plugins intéressants à mettre en place :

Chaque configuration du plugin est disponible sur la page de celui-ci.

Automatisons nos tâches !

Voyons plus en détails le plugin watch

Nous avons vu que Grunt permet :

  1. Effectuer des tâches automatiquement
  2. Ne le faire que si besoin

Eh bien c'est exactement ce à quoi sert le plugin watch : nous voulons modifier le css que lorsque notre (nos) fichier(s) scss sont modifiés et nous pouvons le faire en surveillant nos fichiers. Grâce à watch il est possible de demander à Grunt de garder un oeil sur tel ou tel fichier et d'effectuer des tâches spécifiques lorsqu'il détecte un changement.

Plugin watch

Ici, nous pouvons voir la configuration de la tâche sass qui va s'occuper de transformer le .scss en .css avec un style compressé (donc minifié) et avec watch nous détectons s'il y a un changement sur n'importe quel fichier .scss et s'il y en a un nous effectuons la tâche sass.

De même, il est possible de couplé watch avec live reload (http://livereload.com/) qui permet alors d'actualiser la page automatiquement dés qu'un changement css est effectué. Je vous laisse regarder ceci sur la documentation du plugin !

Pour finir, nous pouvons alors diviser les tâches et les enregistrer sous différents noms. Avec Grunt, il est possible de faire des tâches de développement (concaténer, transformer le sass en css) et des tâches de production (minifier, optimiser les images...etc).

Le gros avantage de Grunt est donc son automatisation. En quelques secondes et une ligne de commande, il sera capable de faire un très large nombre de tâches.

Liens utiles :

A noter :

Le fichier node_modules n'est pas à versionner, l'idée étant d'avoir uniquement un fichier de configuration json et js.
Un simple npm install et votre workflow Grunt est prêt à être utilisé !

Un commentaire

  1. Bonjour,

    Contrairement à ce que vous dites, l’installation de Grunt ne nécessite ni Ruby, ni SASS. Le seul prérequis est Node.

    Stef

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.