brunch.io

Brunch** est un bundler fonctionnant en javascript, qui nécessite l'installation préalable de NodeJSet son gestionnaire de paquet npm.

Une fois nodejs installé, il est possible de vérifier le fonctionnement de npm dans une fenêtre de ligne commande (CMD ou PowerShell sous Windows, ou dans une fenêtre de terminal sous Linux ou MacOS).

> npm -v
6.4.1

L'installation de Brunch se fait de manière globale (-g), pour toute la machine.

> npm install -g brunch
...

Il est possible de vérifier la bonne installation de brunch en testant sa version

> brunch -v
2.10.17

Il est désormais possible de lancer l'exécution de brunch depuis n'importe quel dossier.

Pour de l'intégration

Brunch accélère l'intégration, en automatisant le rechargement de la page entre chaque sauvegarde de fichier (CTRL+S), en plus d'effectuer tous les traitements classiques sur les fichiers JS (concaténation, transpilation, minification,…) et sur les fichiers CSS (concaténation, minification, traitement SASS/LESS, autoprefixer,…).

Lors de la création d'un nouveau projet d'intégration, les commandes suivantes initialiseront le projet :

> mkdir monprojet> cd monprojet

monprojet> brunch new
...

Après la longue installation des librairies dans nodes_modules, un dossier app devrait également être disponible, contenant les fichiers de base du projet.

La commande suivante lance l'observation des modifications de fichiers, ainsi qu'un serveur interne.

monprojet> npm start

Cette commande est un alias de la commande brunch watch –server (que l'on peut raccourcir en brunch w -s).

Pour le développement de thème Wordpress

Cette fois, le rechargement automatique de la page ne fonctionne pas, puisqu'elle doit être compilée en php, et donc passer par le serveur. Le starter kit suivant reste néanmoins utile pour séparer totalement la partie dev de l'installation de Wordpress.

Installer Wordpress

Créer un dossier “dev” à la racine de wordpress

En ligne de commande :

cd dev
brunch new -s https://github.com/hors-lignes/brunch-wp

Récupérer un thème brunché (les sources d'un .css / .js)

npm shuji : https://www.npmjs.com/package/shuji

Dans le fichiers JS ou CSS, si on a pas les fichiers .map, on peut récupérer le sourceMappingURL et le passer à la moulinette avec un base64 decode : https://base64.guru/converter/decode
La valeur de sourceMappingURL correspond au contenu du fichier .map nécessaire

Après : shiji theme.css.map -o ./dossierDeSortie/