Gérer vos assets CSS et JS avec Brunch

Le chargement de votre site est un peu long ? Découvrez Brunch, un outil pour combiner et compresser les CSS et JS.

Le temps de chargement d’un site web est quelque chose de crucial. Plus votre page sera rapide, plus votre taux de rebond sera faible. Cela peut se traduire de manière directe sur votre chiffre d’affaires, pour un e-commerce par exemple.

D’un autre côté, l’optimisation est un processus couteux en temps ou argent et un site web complètement optimisé est souvent « hors budget », que vous le fassiez vous-même ou non. Il faut donc savoir optimiser judicieusement, afin de perdre peu de temps à en gagner le plus possible. 

Dans cette optique, laissez moi vous présenter Brunch.io

Limitez les appels lors du chargement d’une page.

Pour chaque ressource chargée, le navigateur doit se connecter au serveur, la demander, puis la télécharger. C’est un processus relativement long, surtout sur la première partie.
Fournir le moins de ressources possibles, en assemblant ses images sous la forme de sprites et ses Css/js, permet de donner à son site un boost vraiment significatif pour peu d’efforts.

Brunch Io est un outil agnostique (qui ne dépend d’aucun framework ni langage, que ce soit serveur ou client) qui va vous permettre de compiler et optimiser les ressources de votre projet simplement.

Plus besoin de le faire à la main ou avec différents outils, Brunch se charge seul de la compilation (si vous travaillez avec des langages comme SASS ou LESS), de l’optimisation (suppression des règles dupliquées, solidification du CSS), puis de la concaténation et de la minification. Le passage en production se fait donc avec simplement quelques fichiers, minifiés et compressés.

Installation

Pour l’installation, vous aurez besoin de Node.js. Ensuite, un simple nmp install -g brunch sera suffisant pour démarrer.

Pour l’utilisation, c’est très simple : si vous voulez que brunch vous génère la structure d’un projet, tapez brunch new <nom_du_projet>. À vous ensuite de créer vos fichiers CSS ou js.

Si vous utilisez des préprocesseurs, brunch pourra s’en occuper pour vous avec brunch watch.
Une fois le projet fini, il ne vous reste plus qu’à taper brunch build pour obtenir vos assets.

Conclusion

Brunch n’est  pas le seul moyen de gérer ses assets (Sprockets et bien d’autres le font très bien aussi), mais c’est clairement le plus accessible pour les non-développeurs. il n’y a qu’une seule commande à connaitre (deux à la limite si l’on ne veut pas créer le projet à la main) et les passages par la console ne sont limités qu’au strict minimum (une fois à la fin du projet).

Le seul frein pour certains sera la nécessité de Node.js, mais ce paquet est maintenant très simple d’installation, et avec la quantité d’outils installables par nmp, je vous conseille de sauter le pas.