Grunt?
Grunt est un gestionnaire de taches à prendre en considération lors de développement front (plus précisément lors de développements CSS / HTML / JS) : Il a de nombreux atouts que nous allons voir dans cette rapide introduction, à la portée de tous.
L’installation de Grunt est très simple et bien expliqué sur le site officiel, en quelques lignes de commande vous serez prêt à tester l’exemple décrit dans cet article.
Concrètement cet outil est très utile dans notre travail de tous les jours, il possède un nombre impressionnant de taches ( ou plugins, dans le cas présent ces deux termes sont des synonymes ). Vous pouvez consulter la liste des taches disponible à cette adresse. Les noms des plugins parlent d’eux même ( surtout pour les développeurs front ), on reconnaît des termes tels que concat, lint, min et autres nom de préprocesseurs ou encore des systèmes de templating html etc.
Grunt permet d’utiliser tous ces outils via la ligne de commande et nous allons voir comment s’en servir.
Utiliser Grunt
La seule dépendance nécessaire pour utiliser Grunt est NPM ( node package manager ) qui est un gestionnaire de package.
Pour commencer nous allons créer un projet nommé grunt-demo, et y ajouter un fichier package.json ( ou taper la commande npm init a la racine de votre projet et vous laisser guider ) qui sera par la suite interprété par NPM.
Contenu du fichier package.json :
{ "name": "grunt-demo", "version": "0.0.1", "devDependencies": { "grunt": "~0.4.0" }, "dependencies": { "grunt-contrib-cssmin" : "*" } }
Les deux paramètres qui nous intéressent sont devDependencies, qui est une dépendance pour utiliser la commande grunt ( via le client grunt-cli que vous avez du installer pour utiliser grunt. Cette particularité méritera d’être développée dans un autre article car elle permet d’utiliser différentes version de grunt sur une même machine, mais cela est en dehors du scope de ce tuto ) et dependencies.
Pour cette introduction a Grunt j’ai choisi de vous montrer a quel point il est facile de concaténer, de minifier et d’optimiser autant de fichiers css que vous le voulez. C’est pourquoi la seule tache Grunt que nous utiliserons sera grunt-contrib-cssmin qui va nous permettre de faire tout cela.
Installer nos dépendances Grunt
Il suffit de faire la commande npm install au niveau de notre fichier package.json et le tour est joué, un dossier node_modules est créé avec un dossier grunt et un dossier grunt-contrib-cssmin.
Configurer Grunt
A la racine de notre projet ( a coté de notre package.json ) nous allons créer un fichier Gruntfile.js. Ce nom est une convention de nommage, Grunt ira chercher les infos de configuration dans ce fichier par défaut.
Le fichier Gruntfile.js :
module.exports = function (grunt) { grunt.initConfig({ // Grunt configuration pkg: grunt.file.readJSON('package.json'), // Import du pakage.json utiliser par npm cssmin: { // Config du plugin cssmin (documentation sur github) combine: { // Options de combinaison pour la compilation des fichiers css files: { 'css/style.min.css' : [ // Nom de sortie du fichier minifier 'css-dev/fichier1.css', // Tableau dans fichier a minifier dans l'ordre 'css-dev/fichier2.css' ] } }, options:{ // exemple de parametre optionnel // ici le systeme de templating de grunt // va écrire la date de compilation dans le fichier minifier banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */' } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); // Charge le plugin / tache // Tache par defaut , la commande "grunt" toute seule // Le second parametre est un tableau qui permet d'executer plusieurs tache a la suite grunt.registerTask('default', ['cssmin']); // Si nous avons plusieur tache grunt il peut etre utile // d'enregistrer les commande pour les executer unitairement grunt.registerTask('compilecss', ['cssmin']); };
Le code est commenté mais si des explications sont nécessaires, laissez-moi un commentaire sous cet article 😉
Toute notre configuration est encapsulée dans la variable JavaScript module et dans son attribut exports qui est une convention utilisée par NPM pour exporter des modules qui seront chargés a l’aide de la librairie requireJS.
Avant de lancer Grunt il ne nous reste qu’une chose à faire, si vous avez étudié le fichier Gruntfile.js vous avez remarqué que deux fichier css : fichier1.css et fichier2.css vont être compilé dans un fichier nommé : style.min.css
Ce fichier compilé sera donc minifié, optimisé et sera une concaténation de deux fichiers ( ou plus si nous le souhaitons ) qui ont été spécifiés dans notre configuration. Ils se trouvent dans le dossier css-dev et seront compilés dans le dossier css qui sera chargé par nos pages html.
Nous sommes prêts à lancer notre commande grunt : Dans le terminal placez vous à la racine de votre projet et tapez grunt puis faites enter ( ou grunt compilecss pour ceux qui ont lu les commentaires du fichier Gruntfile.js jusqu’au bout ). Une fois ceci fait vous pouvez constater que vos deux fichiers css on bien été compilés dans un nouveau dossier nommé css et dans un fichier style.min.css
Voîlà pour cette première prise de contact. Au prochain épisode, on rentre dans le dur 😉