Introduction à Grunt JS

Qu’est ce que Grunt ?

Grunt est un outil permettant de faciliter la publication de site web, car il va nous permettre d’optimiser les fichiers CSS, JS, vérifier le PHP, copier et déplacer des images etc…

Pré-requis

Utilisons un dossier typique d’un petit site web, contenant donc plusieurs css, js, php et des images.

Installation

Tout d’abord, Grunt est basé sur node.js, donc il faut commencer par l’installer si cela n’est pas déjà fait.

Maintenant, nous pouvons installer Grunt facilement en ligne de commande :

npm install -g grunt-cli
//g signifie qu’on l’installe de manière globale sur le système

Puis, ajoutons le module Grunt à notre projet, et entrons les informations de notre projet :

npm init

Et installons le module Grunt :

npm install grunt --save-dev

Le dossier node_module est maintenant créé dans notre projet !

Le fichier package.json est également ajouté et référence les dépendances, utile lorsqu’on bosse à plusieurs car il suffira de récupérer le projet sous Git par exemple et de relancer simplement l’installation sans avoir à refaire tout ce qu’on a fait et cela replacera le dossier node_module :

npm install

Note: penser à exclure “node_module” du système de versionning (SVN, Git…) du projet afin de ne pas archiver tous ces changements, le fichier package.json suffit.

Pour fonctionner, Grunt demande un fichier par défaut à la racine du projet nommé Gruntfile.js, que nous allons créer. Ce fichier servira à créer nos taches.

Création des tâches

Dans notre fichier Gruntfile.js, à la racine de notre site, nous allons ajouter les tâches à réaliser et est défini ainsi :

module.exports = function(grunt) {
    // Do grunt-related things in here
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
};

Ajoutons notre première tâche qui sera de concaténer nos fichiers js, mais pour cela, et comme pour toutes les tâches grunt, nous aurons besoin d’un plugin.

Installons le plugin contrib-concat qui va nous permettre de faire cela.

npm install grunt-contrib-concat --save-dev

et on va simplement l’ajouter en tâche dans notre fichier Gruntfile.js

module.exports = function(grunt) {
    // Project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: { //plugin name
            options: {
                separator: ';', //add ; if missed
            },
            dist: { // task name
                src: ['js/index.js', 'js/plugins/angular.*.js'], 
                //all files to concat in this order
                dest: js/production.js',
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat'); 
};

Exécution

Dans la console, nous pouvons maintenant exécuter notre tâche grunt:

grunt concat 
grunt concat:dist //ou préciser laquelle dans le cas où il y a plusieurs concat

Et voilà les fichiers rassemblés dans le fichier « production.js » à la racine de notre dossier js/ !

Pour minifier en plus ce fichier, on fera la même manipulation avec le plugin uglify par exemple et ainsi de suite !

Lien et sources :

http://gruntjs.com/getting-started
http://gruntjs.com/plugins
https://www.npmjs.com/package/grunt-contrib-concat

Twitter

Facebook