La majorité des développeurs que je connais ont un point commun, une caractéristique qui les distinguent des autres professions.
Ils sont paresseux.
Loin d’être un défaut, cette paresse est encouragée car elle se traduit par une tendance à éviter les tâches répétitives et fasitidieuses, et libèrent du temps pour les activités plus productives (écriture de documentation et test … quoique …)
Les outils qui permettent au développeur consciencieux d’en faire le moins possible foisonnent; générateurs de templates et boilerplates, snippets, gist et autres pastebin, et outils d’automatisation.
C’est à cette dernière catégorie d’outils que nous allons nous intéresser et plus particulièrement au plus célèbre d’entre eux: grunt.
tous les codes source de cet article sont disponibles sous github
A quoi ça sert ?
Grunt est un exécuteur de tâches qui peuvent être lancées unitairement, ou par groupes.
Pour parler concrêtement, le travail quotidien d’un dev front consiste quasi continuellement à :
- développer ou modifier son code (ou celui du voisin)
- corriger les fautes de syntaxes qui ne correspondent pas aux règles de codage
- vider les répertoires de sortie où sont compilés ses fichiers
- compiler ses templates pour générer les fichiers html
- compiler et minifier ses fichiers html
- lancer ses tests unitaires (si si si, il paraît que ça se fait beaucoup)
- déployer son application
- rafraîchir son navigateur
Et recommencer …
Grunt permet d’automatiser la plupart de ces tâches (non, il n’écrira pas le code ou la doc pour vous, mais il peut néanmoins générer la documentation yuidoc par exemple)
Si on ajoute à ça une communauté active qui propose un grand nombre de plugins pour vous faciliter la vie, pourquoi hésiter plus longtemps ?
Par quoi on commence ?
PS: toutes les manipulations ci-dessous tournent sous MAC, avec nodejs et npm installés
Il faut d’abord installer grunt et l’outil de ligne de commande grunt-cli
1
|
|
Si à cette étape vous vous amusez à exécuter la commande grunt (ben, faites le, histoire de suivre un peu), vous risquez de voir ceci apparaître :
1 2 3 4 5 6 7 8 9 10 |
|
Ce message indique que le moteur de grunt n’est pas installé, et que grunt utilise un fichier de configuration Grunfile.js
décrivant l’ensemble des tâches que vous souhaitez le voir faire exécuter.
Configuration de grunt
Créez puis ouvrez les fichier suivant avec votre éditeur favori.
1
|
|
Nous allons tout d’abord installer le package node de grunt en utilisant le gestionnaire de packages de node. Commencez par éditer le fichier package.json.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Sauvez et lancez la commande qui installe les dépendances node:
1
|
|
A cette étape, vous devez pouvoir exécuter grunt (l’option -v pour verbose):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
On voit que grunt cherche dans le fichier Gruntfile.js les tâches à enregistrer et, en l’absence d’indication complémentaire, essaie de lancer une tâche default
, qu’il ne trouve pas parce que, pour ceux qui suivent, nous n’avons encore rien écrit dans Gruntfile.js.
La première tâche
Imaginons que nous compilons notre projet et que le résultat soit déposé dans un répertoire public
et que nous souhaitons définir une tâche qui permette de vider le contenu de ce répertoire.
Nous allons utiliser un des nombreux plugins de grunt : grunt-contrib-clean
1
|
|
l’option —save-dev permet d’ajouter automatiquement la dépendance au fichier package.json
Editez le fichier Gruntfile.js pour ajouter le code suivant:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Puis, créez un répertoire public
, ajoutez-y un fichier test
et lancez grunt:
1 2 3 4 5 6 7 8 9 10 11 |
|
Le répertoire public
et son contenu ont bien été supprimés.
Nous avons créé notre première tâche grunt.
Nous verrons dans le prochain article comment utiliser les plugins et créer nos propres tâches.