Utiliser Grunt | Windows

Grunt
Grunt

Grunt ?

Grunt permet l’automatisation des tâches répétitives d’un développement comme la minification, la compilation (sass), la concaténation, les tests … Une fois configuré via un fichier Gruntfile, un task runner effectue le travail.

Installation

On ouvre une fenêtre d’invite de commande : a + R.

Grunt est en node.js. Pour savoir si node.js est installé :

Sinon on utilise l’installateur pour Windows disponible sur le site nodejs.org. L’installateur permet également de mettre à jour nodejs.

On installe le package qui permet de gérer Grunt en ligne de commande.

On se rend dans la racine du projet. On installe le package qui gère Grunt en ligne de commande.

Et l’on répond aux entrées.

On installe Grunt en local dans le projet.

On crée le fichier Gruntfile.js à la racine du projet. On écrit dans le fichier Gruntfile.js la base de configuration.

Sass

On installe en local le package pour Sass.

Le dossier node_modules contient tous les modules que l’on pourra utiliser pour Gruntfile.js.

On écrit dans Gruntfile.js :

Utilisation sous Windows

On échappe le caractère backslash \ pour pourvoir l’utiliser dans le chemin des fichiers.

Si l’on veut généraliser les sources au lieu de les définir une par une, on peut écrire :

Plugin Sublime Text

On installe le plugin Grunt pour Sublime : Ctrl+Maj+P f  Install f Grunt.

On indique au plugin l’emplacement du fichier Gruntfile.js s’il n’est pas à la racine (pour le développemnt d’un plugin par exemple) dans le fichier du projet projet.sublime-project :

exemple sous Windows

Concaténer les fichiers JavaScript

On installe le package Grunt : grunt-contrib-concat dans le projet.

L’option –save-dev sauvegarde le package dans package.json du projet pour pouvoir le réinstaller en faisant npm install.

On ajoute la tache dans le fichier Gruntfile.js.

Compression

On installe le package Grunt : grunt-contrib-uglify dans le projet.

On ajoute la tache dans le fichier Gruntfile.js.

Et hop, un mécanisme automatique pour lancer les tâches nécessaires au développement d’un projet.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *