Premiers pas avec gruntjs

Installer Grunt

Prérequis

Grunt nécessite l’installation de Node.js et npm. Si vous n’avez pas installé Node.js et/ou npm sur votre machine, rendez-vous sur https://nodejs.org et téléchargez le programme d’installation ou le package correspondant à votre système d’exploitation.

Première installation

Si vous installez Grunt pour la première fois, vous devrez d’abord installer le package d’interface de ligne de commande Grunt grunt-cli globalement.

npm install -g grunt-cli

Cela installe globalement l’interface de ligne de commande pour Grunt afin que vous puissiez exécuter la version locale de Grunt dans votre projet.

Vous pouvez vérifier que le package grunt-cli est installé en exécutant la commande suivante :

grunt --version

Cela devrait imprimer au moins la version actuelle de votre paquet grunt-cli.

Installer Grunt dans votre projet

Une fois que grunt-cli est opérationnel, vous pouvez installer le véritable exécuteur de tâches grunt et votre premier paquet Grunt grunt-contrib-jshint :

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev

Cela télécharge les packages à partir du gestionnaire de packages NPM et les enregistre en tant que “devDependencies” dans votre fichier “package.json”.

Gruntfile

Ensuite, vous avez besoin d’un Gruntfile.js dans la racine de votre projet qui agit comme un fichier de configuration pour les tâches Grunt :

module.exports = function(grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js'],
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');


    grunt.registerTask('default', ['jshint']);
};

Ce fichier fait trois choses :

  1. Il dit à Grunt de charger la tâche grunt-contrib-jshint à partir du package NPM
  2. Il conseille à la tâche jshint de s’exécuter sur le fichier Gruntfile.js
  3. Il crée une tâche Grunt nommée “default” qui exécute la tâche “jshint”

Grunt en cours d’exécution

Après avoir configuré votre projet, vous pouvez exécuter la tâche “par défaut” de Grunt en appelant :

grunt

Cela lance grunt-cli qui exécute le grunt local qui recherche une tâche Grunt nommée default qui est configurée pour exécuter la tâche appelée jshint.

Tâches en cours d’exécution

Tâches en configuration

Tous les attributs de grunt.initConfig sont des tâches valides, donc si votre Gruntfile ressemble à ceci :

module.exports = function(grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js'],
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');


    grunt.registerTask('default', ['jshint']);
};

La commande shell $ grunt jshint exécutera la tâche jshint.

Tâches avec objectifs

Les tâches peuvent avoir différentes cibles. Prenez cet extrait de code par exemple :

    grunt.initConfig({
        jshint: {
            gruntfile: {
                files: ['Gruntfile.js']
            },
            project: {
                files: 'src/**/*.js'
            }
        }
    });

Ici, jshint peut cibler le gruntfile ou tous les fichiers JavaScript de votre projet. Si nous lançons $ grunt jshint les deux cibles seront utilisées, mais si nous lançons $ grunt jshint:gruntfile le linter ne sera appliqué qu’au gruntfile.

Tâches enregistrées

Les tâches par défaut enregistrées comme ceci grunt.registerTask('default', ['jshint']); s’exécuteront avec la commande shell $ grunt.

Les nouvelles tâches enregistrées s’exécuteront en transmettant son nom comme argument de ligne de commande à grunt. Par exemple:

grunt.registerTask('gruntfile', ['jshint:gruntfile']);

Fonctionnera avec $ grunt gruntfile.

Aider

Exécutez grunt -h pour voir ce qui suit :

  • Paramètres de ligne de commande
  • Toutes les tâches autonomes disponibles dans le Gruntfile du répertoire actuel
  • Toutes les sous-tâches de chaque suite de tâches dans le Gruntfile du répertoire actuel