Pré-requis
Comme abordé ci-dessus, Grunt utilise NPM le gestionnaire de packages de Node.js. Vérifiez donc que celui-ci est bien disponible.
Installation
Pour installer grunt sur votre machine (qui va vous permettre d'accéder à la commande grunt) ouvrez un terminal et tapez ceci :
npm install -g grunt-cli
Voilà, c'est tout. Vous pouvez désormais utiliser grunt dans vos projets !
Exemple concret
Voyons à présent un petit exemple de l'utilisation de Grunt. Dans ce cas, nous allons nous contenter de lui demander de nous minifier le fichier exemple.js à chaque fois que nous le modifierons puis de nous transférer le résultat dans exemple.min.js. Nous conservons donc notre fichier de travail en parallèle.
Création de package.json
Rendez-vous dans votre dossier de travail, créez le fichier package.json puis éditez le en ajoutant les lignes suivantes :
{
"name": "MonProjet",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-uglify": "~0.2.2"
}
}
Les deux premières informations parlent d'elles-mêmes, il s'agit du nom et de la version de votre projet. devDependencies va indiquer à NPM quels sont les modules qu'il devra télécharger. Dans notre cas, il devra récupérer grunt ainsi que uglify.
Dans un terminal, rendez vous dans votre dossier de travail puis lancez la commande suivante :
npm install
Une fois les opérations terminées, vous devriez avoir un dossier nommé node_modules.
Note : si vous utilisez un gestionnaire de version tel que git, il est conseillé de ne pas inclure ce dossier. Les personnes qui cloneront votre dépôt n'auront qu'à lancer la même commande pour récupérer les dépendances (via package.json qui lui aura été inclus).
Création de Gruntfile.js
Dans votre dossier de travail, créez Gruntfile.js puis ajoutez les lignes suivantes :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
compress: {
files : {
"exemple.min.js" : ["exemple.js"]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('goUgly', ['uglify:compress']);
};
Il y a trois grandes parties dans ces lignes.
La première, le initConfig qui permet de définir des tâches pour chaque module que vous souhaitez utiliser. Dans notre cas, nous définissons pour le module uglify une tâche nommée compress. Cette dernière va s'occuper du fichier exemple.js et le compresser dans exemple.min.js.
Dans notre exemple nous donnons le nom exact du fichier source mais il est tout à fait possible d'appliquer une règle plus globale. Par exemple, js/*.js prendra en compte tous les fichiers d'extension .js dans le dossier js.
Deuxième partie, le chargement des modules précédemment récupérés par npm. Dans notre cas, nous demandons à Grunt de charger la dépendance grunt-contrib-uglify.
Enfin, nous créons une tâche goUgly qui éxécutera compress pour le module uglify.
Lancement !
Maintenant que nous avons mis en place notre tâche nous allons l'éxécuter. Pour cela, retournez dans votre terminal en vous plaçant toujours dans votre dossier de travail puis tapez la commande suivante :
grunt goUgly
Si tout s'est bien déroulé, vous devriez avoir une confirmation de la création de exemple.min.js.
Note : Nous avons intitulé notre tâche goUgly. Ce n'est pas indispensable si vous n'en avez qu'une seule. Dans ce cas, nommez la default et il vous suffira juste de taper :
grunt
Automatisation
A présent, faisons en sorte que cette tâche s'effectue toute seule dès qu'une modification sera apportée à notre exemple.js.
Pour cela, nous allons utiliser le module watch.
Installation du module
Dans votre terminal, tapez la commande suivante :
npm install grunt-contrib-watch --save-dev
Vous l'aurez compris, npm va télécharger le module et le ranger dans node_modules. Le paramètre –save-dev va quant à lui ajouter automatiquement une ligne dans package.json :
"grunt-contrib-watch": "~0.5.3"
Si vous ne tapez pas ce paramètre il vous faudra l'ajouter manuellement.
Création de la tâche
A présent, retournez dans Grunt.js et ajoutez ces lignes dans le initConfig :
watch: {
files: ["exemple.js"],
tasks: ['goUgly']
}
Files indique les fichiers à "écouter" et tasks, les tâches à effectuer lors d'un changement de ceux-ci.
Ajoutons le chargement du module watch :
grunt.loadNpmTasks('grunt-contrib-watch');
Et à présent, dans le terminal, tapez la commande :
grunt watch
Un message devrez vous indiquer que le script est en attente. Faites un test, modifiez exemple.js et sauvegardez. Le module watch a éxécuté goUgly et a généré votre fichier exemple.min.js sans intervention de votre part !
