Grunt

Une intro rapide

C'est quoi, Grunt ?

C'est un programme permettant l'automatisation qui fonctionne sous nodejs.

+

Ça veut donc dire que c'est multiplateforme Windows, Mac, Linux ...

... et que le code est en javascript :)

Ok mais ça sert à quoi, Grunt ?

Cela permet de lancer des tâches, comme par exemple make ou ant ou autre outil de build automatisé.

En fait ça sert à faciliter le travail sur un projet de dev.

Des exemples ?

- Vérifier la syntaxe (linters js, css, html ...)

- Concaténer des fichiers

- Minifier ces css / js

- Avoir du templating

- Avoir un serveur de dev simple intégré

- Lancer des opérations dès qu'un fichier change (watch)

- Optimiser automatiquement ces images

- Gérer ses sprites images css de manière automatique

- Gérer des builds pour des environnements différents (dev, prod ...)

- Synchroniser ses bdd prods, dev, staging

- etc etc etc ...

Wé enfin j'imagine on peut pas tout faire quand même ?

Il y a quand même aujourd'hui 4 848 plugins qui existent :)

Sans parler du fait qu'il est facile d'écrire son propre plugin ...

Et que l'on peut lancer aussi des commandes, ce qui le rend compatible avec tout ce qui est exécutable en cli (shell, php etc ...)

Bon ok, fait voir comment ça marche, voir si c'est pas trop relou

Ok c'est parti, à vos claviers :

Tout d'abord il vous faut nodejs et npm d'installé :

1. Pour installer nodejs, téléchargez et installez ici : https://nodejs.org/download/
2. Pour npm c'est encore plus simple il est inclus avec nodejs :)

Voilà vous avez tous les outils de base, on va se faire un test, pour cela, créez vous un dossier vide "demo"

Initialisation du projet : npm

On va initialiser le projet pour npm, pour déclarer ce que va utiliser le projet.

Rendez vous dans le dossier "demo" avec un terminal et tapez : npm init , passez toutes les questions, un fichier package.json a été crée.

Initialisation du projet : installer grunt

Toujours depuis le terminal, lancer la commande suivante :

npm install -g grunt-cli

(Cette commande n'est à faire qu'une seule fois, elle permet de lancer grunt en ligne de commande, mais n'a pas installé grunt. Le -g veut dire installation globale au niveau de la machine)

Ok maintenant on installe grunt dans notre projet :

npm install grunt --save-dev

L'option --save-dev sert à dire, ça ne sert que sur le projet en mode dev, et ça enregistre dans le fichier package.json la dépendance.

Installer un plugin

Pour cette intro on va installer un plugin qui checke la syntaxe de nos fichier js :

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

On se fait un fichier js pipo de test, main.js avec par exemple ça dedans :

var a = 1
var b = 2
var c = 3

Configurer un plugin

Toute la configuration grunt se fait dans un fichier qui doit se nommer Gruntfile.js, on le crée et on le remplit :

// Toute la config doit être dans cette fonction
module.exports = function(grunt) {

  // Là on déclare la config du projet
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // Là on configure pour jshint
    jshint: {
      // On lui dit sur quels fichiers il doit checker
      all: ['*.js']
    }
  });

  // Là on loade le plugin
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // Ici on enregistre les tâches
  grunt.registerTask('default', ['jshint']);

};

Utiliser

Voilà c'est prêt, on tappe la commande

grunt

dans le terminal, qui va lancer la tâche 'default' et on obtient ça :

Questions ?