Les préprocesseurs sont certes très utiles, mais si le gain de temps fait grâce à un développement simplifié passe dans la gestion des compilations de toutes nos ressources pour les tests et la mise en production, leur intérêt s'en retrouve très fortement diminué. Heureusement qu'il existe des tasks runner comme Broccoli !
Mais en fait, qu'est-ce qu'un task runner, et comment les utiliser ? Pour répondre à cette question, je vous propose un focus sur Broccoli, accompagné d'un tutoriel complet pour vous mettre sur la bonne voie.
Le brocoli (Brassica oleracea var. italica) est une variété de chou originaire du sud de l'Italie. Il fut sélectionné par les Romains à partir du chou sauvage. Ceux-ci l'appréciaient beaucoup, et la cuisine italienne l'utilise beaucoup. Il fut introduit en France par Catherine de Médicis.
Source : Wikipedia
Plus sérieusement, Broccoli est un outil en ligne de commande qui vous permettra d'automatiser vos processus de tests, compilation et bundle de vos différents projets web.
En outre, il vous permettra aussi de mettre sur les pieds un petit serveur de développement qui vous fournira les versions compilées de vos différentes ressources, et vous permettra de travailler en "conditions réelles" (ce que ne permet pas un simple fichier .HTML, les simples fichiers locaux ayant des problèmes de sécurité avec le Javascript.
Si vous connaissez deja Grunt ou Gulp, son fonctionnement est assez semblable.
Prérequis
L'objectif de cet article est d'être le plus simple possible pour qu'il reste accessible à tous, même (surtout) si vous n'avez pas de bases en Javascript. En revanche, son but n'est pas de vous apprendre à utiliser votre système, et il vous faudra donc posséder quelques logiciels et connaissances avant de pouvoir commencer :
- Node.js (https://nodejs.org/) doit être installé.
- Npm (https://www.npmjs.com/) doit être installé.
- Vous devez savoir ouvrir un terminal
- Vous devez posséder les droits administrateurs sur votre machine, ou demander à quelqu'un qui les a de vous aider pour l'installation d'un petit outil.
L'outil en question est un utilitaire pour broccoli que vous pourrez installer en entrant dans une console avec les droits administrateurs la commande suivante :
npm install --global broccoli-cli
Notez aussi que Broccoli et npm sont des outils en ligne de commande (cli), et que si vous ne voulez absolument pas avoir affaire à un terminal dans votre vie, cet article n'est pas pour vous. Il vous sera possible d'utiliser broccoli sans ligne de commande si la personne qui l'a mis en place a prévu un exécutable, mais sa mise en place nécessite un petit passage par la ligne de commande dans tous les cas.
Partie 1 : mise en place
Pour ce tutoriel, notre objectif sera de mettre en place une configuration de base pour broccoli, à partir de laquelle vous pourrez évoluer vers tout type de projets, quel que soient les préprocesseurs que vous avez choisi d'utiliser.
Nous allons donc commencer par créer un dossier que nous allons nommer "broccoli_exemple", puis entrer dedans. Nous allons créer un dossier dans lequel nous mettrons notre HTML, que nous appellerons "views". Creez un simple petit HTML avec le contenu de votre choix dans le dossier views et nommes le "index.html".
Ouvrez un terminal et placez-vous également dans le dossier "broccoli_exemple".
Installez broccoli grâce à npm avec la commande suivant :
npm install --save-dev broccoli
Broccoli, mais aussi tout ses modules s'installent grâce a npm, un gestionnaire de modules pour node.js !
Broccoli se configure a l'aide de fichiers Brocfile.js, nous allons donc creer notre premier Brocfile !
Creez un fichier nomme Brocfile.js, et inserez-y les lignes suivantes :
// Listing des differents dossiers utilises. Ajouter uni ligne par fichier a suivre
var views = 'views';
// On exporte le dossier qui nous interesse>
module.exports = views;
Les lignes commençant par "//" sont des commentaires, et sont à la destination des personnes lisant le code, Broccoli ne les prend pas en compte.
Maintenant que tout est en place, il ne nous reste plus qu'à tester ! Dans la console, entrez "broccoli serve –port 8000", puis allez dans votre navigateur a l'adresse "http://localhost:8000" pour voir votre index.html !
Partie 2 : Compilation de ressources.
Maintenant que Broccoli est en place, mettons en place notre premier préprocesseur (qui n'en est pas vraiment un) : Jade (http://jade-lang.com/).
Créez un fichier "exemple_jade.jade" dans votre dossier views, et mettez a l'interieur l'exemple suivant :
doctype html
html(lang="fr")
head
title Je suis en jade !
body
h1 Je suis en jade !
Maintenant que notre exemple est en place, installons notre module supplementaire :
npm install --save-dev broccoli-jade
Enfin, ouvrez le Brocfile, et transformez le de la maniere suivante :
// Declarations des modules complement
var compileJade = require('broccoli-jade');
// Listing des differents dossiers utilises.
var views = 'views';
// Operations sur les fichiers et dossiers
views = compileJade(views);
// On exporte le dossier qui nous interesse
module.exports = views
Vous pouvez noter que deux lignes se sont ajoutées, une déclaration des modules utilisés (tout en haut), et une opération sur notre dossier views. Ces deux lignes suffisent à Broccoli pour compiler tous les fichiers jade qu'il trouvera dans le dossier views en fichiers HTML.
Éteignez le serveur broccoli (CTRL C en général), rallumez le et allez admirer votre oeuvre sur http://localhost:8000/exemple_jade.html.
Partie 3 : Ajouter des dossiers
Nous avons notre HTML, il va maintenant nous falloir des Css et des js !
Pour rester bien rangé, nous allons créer un dossier "assets", dans lequel nous allons créer les dossiers "scripts" et "stylesheets", puis les fichiers "application js" et "applications css" dans leurs dossiers respectifs. Je vous laisse le choix du contenu. Enfin, ajoutons a index.html nos fichiers "/scripts/application.js" et "/stylesheets/application.css".
Comme pour le jade, nous allons ajouter les deux modules correspondant aux préprocesseurs de notre choix. Pour moi ce sera babel et auto-prefixer.
npm install --save-dev broccoli-babel-transpiler
npm install --save-dev broccoli-autoprefixer
Nous allons aussi ajouter un module qui nous permettra de réunir nos dossiers assets et views en un seul lors de la compilation.
npm install --save-dev broccoli-merge-trees
Enfin, modifions notre Brocfile.js
// Declarations des modules complement
var compileJade = require('broccoli-jade');
var compileES6 = require("broccoli-babel-transpiler");
var autoprefixer = require('broccoli-autoprefixer');
var mergeTrees = require('broccoli-merge-trees');
// Listing des differents dossiers utilises.
var views = 'views';
var assets = 'assets';
// Operations sur les fichiers et dossiers
assets = compileES6(assets);
assets = autoprefixer(assets);
views = compileJade(views);
// Reunion de nos differents trees en un seul
var sourceTrees = [views, assets];
var app = new mergeTrees(sourceTrees, { overwrite: true })
// Export de notre tree "global"
module.exports = app
Nous retrouvons de nombreux ajouts : le module Jade en haut a ete rejoint par les trois modules que nous venons d'ajouter, notre dossier "assets" a été declare comme lors de la partie 1, et nous faisons aussi deux nouvelles opérations sur notre dossier assets.
Enfin, nous avons ajoute une partie, la réunion de nos deux dossiers "views" et "assets", dans un objet sans contrepartie en matière de dossiers : app. C'est ce nouvel objet que nous exportons maintenant grâce à module.exports.
Comme d'habitude maintenant, rallumez broccoli et allez voir le resultat.
Partie 4 : Compilation du resultat
Vous avez maintenant un environement de dev, et pouvez donc finire votre projet, mais vous ne pouvez evidemment pas envoyer vos fichiers jade et vos assets non compiles a votre client ! Il est donc temps de decouvrir la 2eme fonction de broccoli : build. Entrez dans votre terminal la commande suivante :
broccoli build result
Cette commande a créé un dossier "result", qui contient tous vos fichiers compiles pour la production. Si le dossier existait déjà, son contenu sera mis à jour en compilant uniquement les fichiers qui ont changés depuis le dernier lancement de la commande "build".
Pour garder des sauvegardes d'anciennes versions, n'hésitent pas à changer le nom du dossier en changeant le mot suivant "build".
Pour finir
Pour finir
Il existe de très nombreux modules pour broccoli, vous pourrez trouver une liste à cette adresse: http://broccoliplugins.com/. N'hésitez pas à expérimenter, l'ajout de modules sera la plupart du temps sensiblement identique à ce que vous avez fait durant ce tuto !