Grunt watch

Grunt est un outil permettant d'automatiser tout plein de tâches au sein de votre environnement de développement : compression css et js, automatisation de tests unitaires, compilation de templates, etc. La liste des plugins disponibles est conséquente et chaque projet devrait y trouver son compte.

Je l'ai utilisé pour le moment dans le but de lancer automatiquement les tests unitaires que j'ai rédigé pour fonctionner avec nodeunit. Le but est d'avoir mon terminal sur mon écran secondaire, et que dès que je sauvegarde un fichier de test, je vois immédiatement le résultat du test à ma droite.

Mise en place

La première chose à faire est d'installer Grunt à l'aide de la commande suivante, soit en root, soit avec sudo :

npm install -g grunt-cli

Grunt sera installé globalement et pourra alors être utilisé dans tous les projets installés sur votre machine. Il faut maintenant configurer votre projet.

npm

La première chose à faire est d'installer grunt et les plugins dont vous avez besoin avec npm. Comme nous l'avons vu précédemment, nous allons donc ajouter grunt et les plugins grunt-nodeunit et grunt-watch à notre projet :

npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-nodeunit --save-dev

Les modules sont installés, et votre fichier package.json est mis à jour. Il est temps de configurer Grunt en lui même.

Grunt

Vous allez créer un fichier nommé Gruntfile.js à la racine de votre projet. Dans ce fichier, vous allez indiquer ce que devra faire grunt. Dans cet exemple, nous allons lui dire d'observer les modifications de tous les fichiers dont le nom termine par ".test.js" et qui sont contenus dans le dossier tests ainsi que ses sous-dossiers et nous lui diront de lancer nodeunit sur ces fichiers.

Voici le contenu du fichier :

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-nodeunit');

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        nodeunit: {
            all: ['tests/**/*.test.js']
        },
        watch: {
            scripts: {
                files: ['tests/*/*.js'],
                tasks: ['nodeunit']
            }
        }
    });
};

La première chose que nous faisons est de charger les deux plugins à l'aide de la méthode grunt.loadNpmTasks. Ensuite, nous indiquons deux méthodes : nodeunit et watch que l'on pourra exécuter avec grunt. Pour la première, nous indiquons quels sont les fichiers à passer en paramètre à nodeunit quand nous lancerons grunt nodeunit. Dans la seconde, nous avons plusieurs paramètres relatif au groupe des scripts dans lesquels nous indiquons les fichiers que nous voulons observer, ici, tous les javascript de tests. Puis, nous spécifions aussi la tâche à effectuer quand l'un de ces fichiers change : nodeunit.

Il ne reste qu'à lancer dans votre terminal :

grunt watch

Sauvegardez un de vos fichiers de test, et voyez votre terminal afficher fièrement qu'aucun test ne plante !

Grunt watch

Vous pouvez ainsi créer tout plein de tâches automatisées, comme par exemple lancer jshint à chaque sauvegarde d'un fichier, ou compiler vos JS avec uglify ou vos CSS avec less dans un dossier de build… Un outil indispensable !

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu