Exercice GRUNT

Exercice GRUNT

 

 Grunt est ce qu’on appelle un “task runner”, qui fonctionne en JavaScript avec Node.js

L’utilité est qu’il permet de créer et d’exécuter des tâches automatisées pour assurer un meilleur workflow de developpement front-end.
Parmis les tâches les plus répétitives que l’on trouve dans un workflow, il y a la compilation de fichiers SASS/LESS, la concaténation et minification de fichiers .JS que l’on doit souvent faire à la main ou en exécutant plusieurs lignes de commandes.
Cela devient d’autant plus compliqué quand on commence à travailler à plusieurs sur le même projet.
Heureusement, en configurant des tâches Grunt sur notre PC, on va pouvoir simplifier tout ce processus de façon à ce qu’il devienne automatique.

Voici les fichiers sources pour démarrer le projet :TD_Grunt  .Dezippez puis lancer le fichier index.html

Le but de ce TD est de créer les tâches nécessaires à la compilation des fichiers CSS et JS du projet joint.Le projet comprend déjà les fichiers CSS suivants :

<!– Inclusion des fichiers de style –>
<link rel= »stylesheet » href= »css/bootstrap.css »>
<link rel= »stylesheet » href= »css/main.css »>

Et pour les fichiers JavaScript :

<script src= »js/jquery-1.10.2.min.js »></script>
<script src= »js/unslider.min.js »></script>
<script src= »js/bootstrap.js »></script>
<script src= »js/main.js »></script>

Le but est de créer des tâches qui vont respectivement :

  • Parser et minifier le fichier main.less
  • Minifier le fichier bootstrap.css et le concaténer avec le résultat de main.css
  • Compresser tous les fichiers .js en 1 seul fichier

Etape 1 : Initialisation de Grunt et de l’environnement de travail.

Vérifiez que vous avez Node.JS et NPM d’installés en tapant respectivement dans un terminal :

node -v  et  npm -v .

Si tout se passe bien, vous devriez obtenir des numéros de version.

Note pour les utilisateurs de Mac et Linux : pensez à lancer les commandes en précisant  sudo  devant.

Placez-vous à la racine du projet et tapez :

npm init .

 

Cela va vous aider à créer un fichier package.json qui contiendra toutes les dépendances de votre projet. Pour l’instant, remplissez juste le titre de votre projet (choisissez un nom sans espaces ni caractères spéciaux) et laissez tout le reste à une valeur nulle.

Vérifiez que le fichier .json final est bien construit.

Il faut ensuite installer le package qui permet de gérer Grunt en ligne de commande :

npm install grunt-cli -g .

 

Cela va créer un dossier /node_modules/ qui contiendra le module /grunt-cli/

Pour finir, installez grunt en local dans votre projet :

npm install grunt --save-dev .

Cela va créer un dossier /grunt/ dans le dossier /node_modules/

(NB: l’option –save-dev permet de sauvegarder le package dans le fichier package.json pour pouvoir à tout moment le réinstaller avec npm install.

Etape 2 : Création du fichier Gruntfile.js

Maintenant que Grunt est correctement initialisé, il va falloir le configurer par rapport à notre projet.

Le fichier de configuration d’un projet Grunt s’appellera toujours : Gruntfile.js

Créez ce fichier à la racine de votre projet.

A l’intérieur, ajoutez :


module.exports = function(grunt) {

 // Configuration de Grunt
 grunt.initConfig({});

 // Définition des tâches Grunt
 grunt.registerTask('default', '');

}

 

Il s’agit du strict nécessaire pour faire fonctionner Grunt.

La plupart du temps, on va devoir installer un nouveau paquet, le configurer dans la fonction initConfig() et créer une tâche faisant appel à une ou plusieurs définitions.

Compilation automatique des fichiers LESS en CSS

Nous allons dans cette partie ajouter une tâche permettant de compiler automatiquement les fichiers .less en .css

Pour cela, il va falloir trouver un package Grunt qui permet de faire ce travail.
Le site http://gruntjs.com/plugins permet de retrouver tous les plugins disponibles pour Grunt.
Celui qui va nous intéresser ici s’appelle “grunt-contrib-less”.
Comme indiqué sur la documentation du package, installez-le avec :

npm install grunt-contrib-less --save-dev .

Une fois le package installé dans les /node_modules/, nous allons pouvoir l’utiliser dans la configuration du fichier Gruntfile.js

module.exports = function(grunt) {

 // Chargement des packages installés
 grunt.loadNpmTasks('grunt-contrib-less');

 // Configuration de Grunt
 grunt.initConfig({
   less: {
     production: {
       files: {
         'css/main.css': 'css/main.less'
       }
     }
   }
 });

 // Définition des tâches Grunt
 grunt.registerTask('css', ['less:production']);

};


Explications :

On va d’abord charger le nouveau package “grunt-contrib-less” que l’on vient d’installer.

Puis, on rajoute dans la configuration de Grunt les options pour configurer ce package.

Normalement, toutes les explications sur la configuration de chaque package est disponible en ligne, cependant pour cette première tâche, nous allons détailler.
On rajoute un objet “less : {}” qui permet d’indiquer que l’on va configurer ce package.

A l’intérieur, on créer un objet “production : {}” qui va tout simplement définir le nom de notre tâche (car on peut créer plusieurs tâches qui utilisent le plugin “less” différemment).
Cet objet “production” doit contenir au minimum un objet “files : {}”, conformément à grunt-contruib-watchla documentation du package.

Cet objet “files” contiendra une liste d’items à compiler, en respectant le modèle suivant :


files: {
 'path/to/destination.css': 'path/to/source.less',

 // … etc.
}

Cette configuration permet d’indiquer au package qu’il doit compiler le fichier path/to/source.less vers path/to/destination.css .

Enfin, la ligne grunt.registerTask(‘css’, [‘less:production’]); permet d’indiquer que lorsqu’on lancera la commande  grunt css  , Grunt devra procéder au lancement de la tâche nommée less:production. (A noter que l’on peut configurer plusieurs tâches et les ajouter à la suite dans le tableau.

Essai

Essayez de lancer la commande et vérifiez si un nouveau fichier main.css a bien été crée dans le dossier /css/ du projet.

Les autres tâches à lancer

Maintenant que vous savez mettre en place une tâche grunt, essayez d’utiliser vos connaissances pour faire la suite.
Rappel : Nous avons jusqu’à présent utilisé le package “grunt-contrib-less” pour compiler automatiquement les “.less” en “.css”.
Les étapes suivantes seraient donc de :

Concaténer le/les fichier(s) “.css” précedemment compilé(s) et compresser (minifier) le fichier final en “app.min.css”

Le package permettant d’effectuer ces tâches s’appelle “grunt-contrib-cssmin”
Installez-le et lisez la documentation officielle en ligne pour le paramétrer correctement sur votre projet.

Concaténer les fichiers “.js” utilisés dans le projet et compresser (minifier) le fichier final en “app.min.js”

Le package permettant d’effectuer ces tâches s’appelle “grunt-contrib-uglify”

Enfin, l’installation d’un dernier package peut s’avérer utile :

Lorsqu’on développe sur le projet, il peut être ennuyeux de relancer manuellement la commande “grunt” à chaque fois que l’on a fait une modification sur un fichier source.

Heureusement, il existe un package  qui permet de vérifier que les fichiers ont été modifiés sur votre disque dur, et de relancer automatiquement les tâches de compilation.

Essayez de mettre en place ce package.

Voici les fichiers sources pour démarrer le projet :TD_Grunt  .Dezippez puis lancer le fichier index.html

Mis à jour le Par Copier coller | Dans Ressources