Grunt, l'exécuteur de tâche

Introduction

Lorsque vous développez pour le web, un certains nombres de tâches doivent se faire à chaque fois que vous voulez tester ou mettre en PROD votre création. Et si toutes ces tâches ennuyeuses et répétitives pouvaient être automatisée simplement ?
Grunt est, entre autres, une solution qui va vous faciliter la vie ! Il peut par exemple gérer automatiquement la compilation de préprocesseurs CSS (LESS, Sass, Compass) lors de chaque modification de fichier, optimiser vos fichiers (concaténation, minimisation,…), gérer les sprites, et j’en passe…

Pour la documentation complète et officielle, c’est par ici : http://gruntjs.com/

Installation de Grunt

Pour installer Grunt, il faut d’abord installer NodeJS (voir l’article Installation de NodeJS)

Une fois NodeJS présent sur votre système, et référencé dans votre Path, vous allez pouvoir installer Grunt en saisissant la commande suivante dans votre terminal : npm install -g grunt-cli
Vous pouvez également installer le plugin d’initialisation automatique de projet avec la commande : npm install -g grunt-init

Préparation d’un projet Grunt

Créer le dossier de projet (ou utiliser la racine d’un projet existant)
Créer le fichier package.json soit manuellement (exemple de fichier en fin d’article) soit via la commande NodeJS comme ceci :
1. Ouvrir le terminal et se placer dans le dossier de projet
2. Créer le fichier de package NodeJs (voir l’article nodeJS pour plus d’informations): npm init
3. Saisir les propriétés personnalisées lorsqu’on nous le propose ou vide pour la valeur par défaut
Créer le fichier Gruntfile.js (voir chapitre correspondant ci-dessous)

Le fichier Gruntfile.js

Le fichier Gruntfile.js est le fichier de configuration de vos tâches Grunt. Il est écrit en Javascript et contiendra les profiles des tâches à exécuter par Grunt, les options de ces tâches et les modules à charger.

module.exports = function(grunt){
  // Project configuration exemple
  grunt.initConfig({
    jshint: {
      gruntFiles: ['Gruntfile.js'],
      appFiles: ['js/*.js']   //to avoid a file : prefix with '!'. to include subfolders : /**/*.js
    },
    concat: {
      js: {   //to run this task only, use cmd : $ grunt concat:js
        src: ['js/app.js','js/module1.js','js/module2.js'],
        //src: ['js/*.js'], //Group the elements with *.js but order will be alphabetical
        dest: 'built/js/built.concat.js'
      },
      options: {
        separator: ';' //separator that must be added between each concatenated file
      }
    },
    uglify: {
      options: {
        mangle: false   //false = don't rename the variables name
      },
      dist: {
        files: {
          //uglified-Target-File : src-File-To-Uglify
          'built/js/built.min.js': ['built/js/built.concat.js']
        }
      }
    },
  });
  //Load the used tasks modules.
  //This section can be replaced with the plugin 'load-grunt-tasks' to load all module automaticaly
  grunt.loadNpmTasks('grunt-contrib-jshint');     //need the jshint plugin
  grunt.loadNpmTasks('grunt-contrib-concat');     //need the concat plugin
  grunt.loadNpmTasks('grunt-contrib-uglify');     //need the uglify plugin
  //Register the tasks to execute them
  grunt.registerTask('default', ['jshint','concat','uglify']);
};

Installation de plugin Grunt

Par défaut, vous n’aurez pas les plugins permettant d’exécuter certaines tâches. Grunt est une sorte de serveur qui doit être personnalisé avec les modules correspondant à nos besoins. Pour installer des plugins, il faut d’abord savoir ce que nous voulons faire exactement. Une fois décidé, il va falloir faire une petite recherche, puis l’installer :

Aller sur la page des plugins : gruntjs.com/plugins
Rechercher le plugin (ex: uglify)
Aller sur la page du plugin en choisissant parmi les résultats (ex: contrib-uglify)
Installer le plugin avec la ligne de commande comme spécifié dans la page de la doc du plugin. Choisir la commande ayant le paramètre –save-dev afin de référencer automatiquement ce plugin dans le fichier package.json. Ex:
npm install grunt-contrib-uglify --save-dev
Ajouter la dépendance dans le Gruntfile.js. Ex:
grunt.loadNpmTasks('grunt-contrib-uglify');

Exécution d’une ou plusieurs tâches Grunt

Pour exécuter une tâches grunt, il suffit de la lancer dans un terminal. Pour cela, nous avons plusieurs possibilités :

Exécuter une tâche précise #grunt [taskname] ex:

grunt concat

Exécuter un module précis d’une tâche de la config : grunt [taskname]:[module]

grunt concat:js

Ou alors, exécuter une tâche prédéfinie avec la fonction registerTask de grunt. Par exemple si vous avez défini la tâche nommée buildJS dans votre fichier de cette manière :
grunt.registerTask('buildJS', ['jshint','concat','uglify']);
elle sera accessible avec la commande :
grunt buildJs

Si la tâche prédéfinie s’appelle default, il suffira de l’exécuter avec la commande :
grunt

Grunt, l’exécuteur de tâche