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 😉