Prendre en main Grunt
Bon cette fois-ci c’est fini, avec la panoplie du webmaster. On a vu l’éditeur de code, les divers packages qu’on peut lui associer dont Emmet, et l’on vient de survoler Sass, compass, breakpoint et susy… nous pouvons dire que nous sommes parés… donc, plus besoin de complément ou supplément… non ?
Eh bien, si !!! Nous avons encore besoin d’un outil à ajouter à cette palette déjà bien remplie… et nous allons voir en quoi ce dernier outil va nous être bien utile.
Avec Sass, nous allons apprendre à éclater nos développements CSS en de multiples fichiers, les fameux _partials… (voir à ce sujet How to structure a Sass project). Nous allons nous apercevoir qu’il en va de même avec nos fichiers JavaScript, qu’il s’agisse de librairies additionnelles, ou de modules que nous allons développer. Tout cela implique forcément un alourdissement considérable de nos fichiers HTML en terme de requêtes client / serveur. En effet, chacun de ces fichiers distincts, va créer tout autant de link href et de script src, qui vont sans cesse établir des connexions http pour être récupéré.
De plus, le plus souvent, tous ces fichiers sont écrit en mode développement et donc consomment pas mal de caractères, entre ceux employés pour le formatage du code (tabulations, espaces, saut de ligne, commentaires à outrance…) et la verbosité concernant le nommage humain de nos fonctions et autres variables… Pouvoir concaténer tous ces fichiers en un seul, pouvoir minifier leur contenu, et pourquoi pas, lancer des vérifications (avec un linter) peut être tout autant de tâches à mettre bout à bout avant de publier les contenus. Si en plus, tout cela peut être réalisé à la volée, cela va forcément se traduire par un gain de temps et surtout accroître la souplesse de travail de manière considérable.
C’est donc là qu’entre en jeu le quatrième larron de la bande, qui n’est autre qu’un automatiseur de tâches JavaScript, en l’occurrence, Grunt.
Installer et prendre en main Grunt
Bon, Grunt.js c’est un des modules de Node.js et pour pouvoir l’utiliser, il faut déjà commencer par installer Node.js. Alors rendons-nous sur l’article Prendre en main Node.js.
Une fois Node installé, nous pouvons employer npm, le gestionnaire de package de Node, pour configurer et installer ce dont nous avons besoin (en quelque sorte npm est à Node, ce que gem est à Ruby). Assurez-vous que node soit actif, lancez le terminal ou la console de commande, puis tapez :
npm install –g grunt-cli
Cette ligne de commande va permettre d’installer puis de pouvoir exécuter Grunt depuis n’importe quel dossier (projet) de l’ordinateur tout en s’assurant de lancer la version de Grunt nécessaire à ce projet (cela sera défini dans les paramètres projet présents dans le fichier package.json).
Revenons un peu en arrière afin de mieux suivre : pour fonctionner, Grunt a besoin de deux fichiers package.json (qui permet de décrire l’ensemble du projet Node et ses dépendances) et Gruntfile.js (qui définit les tâches mises en place et permet de charger les modules nécessaires).
Pour plus d’informations rendez-vous sur l’article Getting started du site de Grunt. Sinon, de manière simple et rapide, prenons un exemple :
Imaginons que l’on souhaite mettre en place un projet Grunt qui consiste à concaténer et à minifier divers fichiers JavaScript. Avant tout, il suffit de créer un dossier (projet), de lancez le terminal ou la console de commande ouvert sur ce dossier en question et de passer en ligne de commande.
npm init
La console va vous guider étape par étape pour créer et renseigner automatiquement le fichier package.json. Le plus important est de donner un nom au projet et ensuite de valider chacune des entrées (par défaut c’est bien) en terminant à la fin par ‘yes’. Le fichier sera créé et vous pouvez l’ouvrir pour en vérifier, et éventuellement modifier, le contenu. Pour plus d’informations sur la valeur de chaque entrée, rapprochez-vous de Built-in prompts.
Il faut ensuite créer manuellement un fichier Gruntfile.js à la racine du dossier, juste à côté de package.json et le compléter par :
module.exports = function(grunt) {
grunt.initConfig({
});
}
Le fichier est prêt à recevoir les diverses instructions. Nous allons pour cela devoir ajouter chacune des tâches qu’il devra prendre en charge et indiquer les modules (plugin) ad-hoc à charger pour les mener à bien.
Ajouter un plugin afin de concaténer les fichiers
Maintenant, nous allons devoir charger, paramétrer et lancer notre première tâche, qui va consister à concaténer les fichiers JavaScripts du projet. Dans un premier temps, il nous faut créer ces fameux fichiers JavaScript avec du pseudo contenu, pour simuler les opérations.
Créons un dossier libs à la racine du projet (attention de garder le même nom que celui présent dans la configuration de compass, ou de modifier dans le fichier config.rb si besoin). Plaçons deux fichiers à la racine base.js contenant simplement :
var appli = {} (sans ; à la fin)
et functions.js contenant :
function lafonction(){
return "ok"
};
lafonction()
Rendons nous ensuite sur le site du plugin à installer : grunt-contrib-concat. En parcourant cette page, nous trouverons tout ce qui est nécessaire pour éviter d’écrire trop de code. Allons-y pour du copier / coller intempestif et intensif… apapeur…
Déjà, il faut installer le plug in et l’ajouter à notre fichier de dépendance… donc copions la première ligne du getting started et collons-la dans la console puis validons.
npm install grunt-contrib-concat --save-dev
Laissons faire la magie de cette ligne de code, surtout grâce à l’ajout de –save-dev. Dès que la console nous rend la main, ouvrons les deux fichiers package.json et Gruntfile.js.
Dans le premier, l’installation a ajouté la dépendance « grunt-contrib-concat »: « ^0.5.1 »… parfait et merci –save-dev… Dans le second, il nous faut manuellement lui ajouter l’instruction pour gérer le chargement de ce module.
Pour cela, rien de plus simple, copions la seconde ligne du getting started et collons la dans le fichier Gruntfile.js, juste après la fonction initConfig et avant la fermeture du bloc principal :
module.exports = function(grunt) {
grunt.initConfig({
});
grunt.loadNpmTasks('grunt-contrib-concat');
}
Maintenant descendons plus bas dans le site à la hauteur de Usage Examples, et copions simplement le contenu de la fonction initConfig. Nous pouvons aller la coller dans notre fichier Gruntfile.js, en prenant soin de l’adapter à nos besoins au niveau des fichiers sources et de destination :
module.exports = function(grunt) {
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['libs/base.js', 'libs/functions.js'],
dest: 'scripts.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
}
Il est important de préserver le séparateur ; pour s’assurer que lors de la concaténation des fichiers, il n’y ait pas d’amalgame entre les dernières et premières lignes.
Voilà, le module et la tâche sont ajoutés, il faut maintenant configurer la prise en compte de cette tâche. Il suffit d’ajouter l’enregistrement de la tâche dans le fichier Gruntfile.js, juste après les instructions de chargement :
grunt.registerTask('notretache',['concat']);
Mettre en œuvre la tâche
C’est tout simple. Depuis la console, il faut lancer la tâche en l’invoquant en tant qu’instruction grunt :
grunt notretache
S’il n’y a pas d’erreur, la console devrait nous informer du déroulement du processus, sous la forme de :
Running « concat :dist » (concat) task File scripts.js created. Done, without errors.
Puis nous rendre la main… il ne nous reste plus qu’à vérifier le fichier scripts.js qui a été créé, et s’assurer qu’il contient bien l’ensemble des deux scripts concaténés.
Ajouter un plugin afin de minifier les fichiers
Beh, il suffit juste de reproduire tout ce que nous avons fait dans le chapitre précédent, mais avec le plug in grunt-contrib-uglify. Donc en résumé, de manière synthétique :
- Installation du plug in – npm install grunt-contrib-uglify –save-dev
- Ajout du chargement de la tâche – grunt.loadNpmTasks(‘grunt-contrib-uglify’);
- Ajout de la configuration… en pensant à ajouter la virgule après la première configuration (concat) déjà présente si la virgule n’y est pas. (voir le code plus bas après la liste)
- Éventuellement changer le nom du gestionnaire de tâche et ajouter la tâche à la liste – grunt.registerTask(‘nostaches’, [‘concat’,’uglify’]);
- Penser à tout enregistrer
- Lancer les tâches depuis la console – grunt nostaches
,
uglify: {
my_target: {
files: {
'scripts.min.js': ['scripts.js']
}
}
}
Ajouter d’autres plugins
Le site de Grunt regorge de plugins. Certains, comme les deux que nous avons précédemment utilisés, sont notés sous la forme de contrib-x, car ils ont été mis en place par l’équipe de Grunt. Mais il en existe énormément, tous d’excellente manufacture, créés et mis en place par des tiers. N’hésitez pas à explorer l’ensemble des informations de paramétrage qui sont fournies dans chacun des modules. Quoi qu’il en soit, tous s’utilisent et se configurent de la même manière. À vos tâches!
Aller plus loin
Grunt - Getting started with Grunt
Jaime Pillora
Getting Started with Grunt: The JavaScript Task Runner provides you with all the information you need to become an effective Grunt power-user. You will quickly learn how to install, configure, and run Grunt. You will go on to understand how to use third-party Grunt and then create your own Grunt tasks that cater to your particular needs....
Mastering Grunt
Daniel Li
Grunt.js continues to excel as the build automation tool of choice. Along with its support for many third-party technologies, Grunt is packaged with a clean API for defining tasks. This powerful tool can streamline your workflow by automating the preparation tasks for production, such as compression, compilation, obfuscation, testing, and even pushing your web application live. This book will teach you how to master build automation and testing with Grunt. You will have the opportunity to utiliz...
