Grunt - The JavaScript Task Runner - Installation et Utilisation

 

Grunt permet d'automatiser les tâches répétitives des projets JavaScript, comme la minification, la compilation, les tests unitaires, etc.

Le plugin contrib-watch est très utile car il permet de lancer une série de tâche à chaque création, modification, suppression de fichier. Ceci permet de déclencher des actions que l'on devait faire manuellement, comme lancer les tests, compiler les fichiers Sass ou Less, minifier le contenu.

De nombreux plugins sont disponibles pour Grunt pour le support de JSHint, Less, Sass, Jade, etc :

• contrib-watch : Lancer des tâches dès qu'un des fichiers du projet a été ajouté, modifié ou supprimé
• contrib-jasmine : Lancer les tests avec Jasmine et PhantomJS
• contrib-jshint : Valider les fichiers JS à l'aide de JSHint
• contrib-coffee : Compiler les fichiers CoffeeScript en fichiers JS
• contrib-compass : Compiler les fichiers Sass en fichiers CSS avec Compass
• contrib-less : Compiler les fichiers Less en fichiers CSS
• contrib-uglify : Minifier les fichiers JS
• contrib-cssmin : Minifier les fichiers CSS
• contrib-imagemin : Minifier les images JPEG, PNG et GIF
• contrib-htmlmin : Minifier les fichiers HTML
• contrib-clean : Nettoyer les répertoires et les fichiers
• contrib-copy : Copier des fichiers ou des répertoires
• contrib-concat : Concaténer des fichiers
• contrib-connect : Se connecter à un serveur Web

Voici la liste des plugins pour Grunt :

• http://gruntjs.com/plugins

Nous allons voir comment installer Grunt, le configurer et l'utiliser dans un projet Javascript.

Installation

Pour faciliter l'installation de Grunt, nous commançons par installer Node.js afin de disposer de la gestion de packages npm - Node.js Package Manager :

• Télécharger Node.js :
• http://nodejs.org/
• Cliquer sur Install
• Installer Node.js

Une fois Node.js installé, nous pouvons installer Grunt :

• Ouvrir un terminal de commandes
• Tapper la commande suivante :
• npm install -g grunt-cli
• Grunt va être ajouté dans le PATH et sera ainsi accessible de n'importe où
• Tapper la commande 'grunt' pour vérifier qu'il est bien accessible

Grunt indique qu'il ne trouve le fichier de configuration Gruntfile dans le répertoire courant.

L'étape suivante sera de configurer notre projet.

Configuration du projet

Nous configurons maintenant notre projet à l'aide de deux fichiers :

• package.json : dépendances vers les packages Javascript gérés par npm (Node.js Package Manager)
• Gruntfile : configuration Grunt de notre projet

package.json : Dépendances vers les packages Javascript

Le fichier package.json indique à npm les dépendances dont nous avons besoin afin qu'il les installe.

Pour cela, nous avons juste besoin de créer ce fichier package.json à la racine du projet, d'y indiquer les dépendances et de lancer l'installation des packages à l'aide de la commande npm install --save-dev.

Nous allons nous servir du fichier package.json suivant :

• Créer le fichier package.json à la racine du projet. 

Ce fichier contient les informations du projet et les packages de dépendance :
Ceci indique que Grunt et ses plugins pour JSHint, NodeUnit et Uglify sont les dépendances du projet et qu'ils seront installés.

Nous installons maintenant Grunt et ses plugins listés dans le fichier package.json.

• Ouvrir un terminal de commandes
• Aller à la racine du projet
• Tapper la commande suivante :

npm install --save-dev

Gruntfile : Configuration Grunt du projet

Le fichier Gruntfile contient la configuration Grunt des tâches à effectuer sur le projet.

• Créer le fichier Gruntfile.js à la racine du projet

Nous allons voir une description de son contenu. Nous verrons dans les paragraphes suivants des exemples de contenu du fichier Gruntfile.js.

Contenu de Gruntfile

Ce fichier Gruntfile.js contient la fonction "wrapper" :
Cette fonction "wrapper" contient le code pour :

• La configuration du projet et des tâches :

  • grunt.initConfig({...})

• Le chargement des plugins et des tâches :

• grunt.loadNpmTasks('plugin_name')

• Les tâches customisées :  

• grunt.registerTask('custom_task', ['plugin_task'])

• grunt.registerTask('custom_task', 'title', function() {
      ...actions...
  } 

Tâche par défaut

La tâche 'default' est obligatoire si on lance la commande grunt sans indiquer de tâche à exécuter.
En effet, la tâche 'default' indique quelle tâche par défaut doit lancer grunt.

Cette tâche 'default' est définie via :

grunt.registerTask('default', ... );

Documentation du Gruntfile

Voici la documentation pour l'écriture du fichier Gruntfile :

• http://gruntjs.com/configuring-tasks
• http://gruntjs.com/sample-gruntfile

Plugins

Plugin : grunt-contrib-uglify

Documentation : https://github.com/gruntjs/grunt-contrib-uglify

Ce plugin sert à minifier le code JavaScript dans un nouveau fichier.

Installation

Deux façons d'installer le plugin :

• Ajouter la dépendance suivante dans le fichier package.json du projet :

  "devDependencies": {
    "grunt-contrib-uglify": "~0.2.2"
  }

• et relancer la commande npm install --save-dev
• OU
• Lancer la commande suivante dans le terminal de commandes :

npm install grunt-contrib-uglify

Gruntfile

• Définir le contenu du fichier Gruntfile.js :

La configuration de 'uglify' indique que tous les fichiers ".js" présents dans le répertoire "src" du projet seront minifiés dans le fichier "output.min.js" du répertoire "dest" du projet.

Lancement

Nous pouvons lancer l'exécution de la tâche de minification 'uglify' qui est ici la tâche par défaut :

• Ouvrir un terminal de commandes
• Aller à la racine du projet
• Tapper la commande suivante :

grunt

• ou en forçant la tâche de minification 'uglify' :

grunt uglify

Le fichier "dest/output.min.js" a été créé et contient le contenu minifié des fichiers JS du répertoire "src".

Plugin : grunt-contrib-jshint

Documentation : https://github.com/gruntjs/grunt-contrib-jshint

Ce plugin sert à valider les fichiers Javascript.

Installation

• Ajouter dans le fichier package.json la dépendance au plugin JSHint :

  "devDependencies": {
    "grunt-contrib-jshint": "~0.8.0"
  }

• Relancer la commande suivante à la racine du projet :

npm install --save-dev

Gruntfile

• Définir le contenu du fichier Gruntfile.js :

Cette configuration indique que JSHint va analyser tous les fichiers ".js"présents dans le répertoire "src" du projet.

Lancement

Nous pouvons lancer l'exécution de la tâche par défaut 'default' qui est ici la tâche de minification 'uglify' :

• Ouvrir un terminal de commandes
• Aller à la racine du projet
• Tapper la commande suivante :

grunt

• ou pour forcer la tâche de minification 'uglify' :

grunt uglify

Grunt affiche maintenant les alertes et les erreurs concernant les fichiers JavaScript du répertoire "src" du projet.

Plugin : grunt-contrib-watch

Documentation : https://github.com/gruntjs/grunt-contrib-watch

Ce plugin sert à surveiller les fichiers du projet : dès qu'un de ces fichiers est créé, modifié ou supprimé, Grunt lance alors une ou plusieurs tâches effectuées par les autres plugins.

Installation

• Ajouter dans le fichier package.json la dépendance au plugin JSHint :

  "devDependencies": {
    "grunt-contrib-watch": "~0.5.3"
  }

• Relancer la commande suivante à la racine du projet :

npm install --save-dev

Gruntfile

• Définir le contenu du fichier Gruntfile.js :

Ceci indique que la tâche 'jshint' sera lancée à chaque création, modification, suppression d'un fichier '.js'.

Lancement

Nous pouvons lancer Grunt sur la tâche par défaut 'default' qui est ici la tâche de 'watch' de surveillance des fichiers et qui va déclencher les tâches à chaque ajout, modification, suppression de fichier :

• Ouvrir un terminal de commandes
• Aller à la racine du projet
• Tapper la commande suivante :

grunt

• ou pour forcer la tâche de surveillance 'watch' :

grunt watch

Grunt est maintenant en attente, ce qui est indiqué par "Waiting..." dans le terminal.

Lors de chaque modification de fichier, Grunt relance la tâche de validation des fichiers JavaScript.

Conclusion

Grunt est très utile pour déclencher des actions répétitives à chaque modification de fichiers.

L'ensemble de plugins permettent d'être plus rapide : inutile d'avoir un IDE pour déclencher des actions de compilation ou de vérification, Grunt le fait tout seul et automatiquement après chaque enregistrement de fichier.

Grunt est un allié très important pour l'écriture de code JavaScript, pour l'utilisation de Sass et Less pour les CSS.

Références

• Grunt : http://gruntjs.com/