dokuwiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== brunch.io ======

**[[https://brunch.io/|Brunch**]]** est un bundler fonctionnant en javascript, qui nécessite l'installation préalable de **[[https://nodejs.org|NodeJS]]**et 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).

<code>> npm -v
6.4.1
</code>

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

<code>> npm install -g brunch
...
</code>

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

<code>> brunch -v
2.10.17
</code>

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 :

<code>> mkdir monprojet> cd monprojet

monprojet> brunch new
...
</code>

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.

<code>
monprojet> npm start
</code>

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|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///