Compilation et live reload

Développement

Pour commencer à développer, allez dans le dossier du projet et faites dans votre terminal :

yarn start

Cela va démarrer la surveillance de vos fichiers, fusionner votre scss et JS lors de chaque sauvegarde et créer un proxy via Browsersync.

TIP

Pour afficher les changements avec auto reload, utilisez http://localhost:3000 Cela va prendre dans votre fichier .env la variable $SITE_URL

Pour arrêter

CTRL + C

Production et staging

Afin de demeurer rapide lors du développenent, toute l'optimisation du code se fait lors du build en vue d'un déploiement en ligne.

WARNING

Avant de déployer en ligne, que ce soit en mode Staging ou Production, toujours faire :

yarn build

🤚 Attention : Votre serveur local doit etre actif lors du build.

Que fait le build :

1. Ajoute un hash devant les fichiers compilés pour le cache busting.
2. Minifie et crée les chunks du code du projet, en séparant les vendors dans un fichier distinct.
3. Compile le JS selon la config Babel.
4. Génère un Critical CSS pour la page d'accueil, la variable CRITICALCSS dans le fichier .env doit être à true.
5. Purge le CSS non-utilisé dans le dossier templates avec purgeCSS.
6. Supprime tout le contenu du dossier web/dist avant d'y mettre les nouveaux fichiers compilés.

Paquets Node

Avec le terminal, à la racine de votre projet :

Ajouter un paquet pour le projet (Bootstrap, Flickity, etc.) :

yarn add [package]

Ajouter un paquet pour le développement (Webpack, etc.) :

yarn add [package] -D

Supprimer un paquet :

yarn remove [package]

Voir la documentation officielle de Yarn