hugo pipes parcel

Le nouveau démarreur Hugo dynamique - Configuration des tuyaux Hugo avec colis.

Notez que ce dépôt vise uniquement à démontrer un pipeline d'actifs et n'est pas considéré comme un démarreur complet. Faites-en comme vous le souhaitez, mais gardez à l'esprit que tout ici est conçu pour notre flux de travail interne.

Nous utilisons un Changelog sur tous nos projets. Veuillez consulter ce fichier pour les mises à jour.

outils

• Hugo - Un framework de site Web à usage général, écrit en Go, qui génère des pages Web statiques.
• Parcel - Un bundler d'applications Web « ultra-rapide » et sans configuration.
• PostCSS | TailwindsCSS (bibliothèque de classes CSS basées sur JS) | PurgeCSS (supprime les CSS inutilisés)
• KyleAMathews/typefaces (charger les polices du système d'exploitation localement avec un petit require )

Pipeline d'actifs Hugo

Cette configuration utilise Parcel pour Javascript et le traitement des polices open source, Hugo Pipes + PostCSS pour le traitement CSS et npm-run-all pour exécuter Parcel et Hugo en parallèle (voir la note ci-dessous). Nous utilisons le gestionnaire de packages Yarn, mais vous pouvez utiliser NPM si vous le souhaitez.

Ce pipeline d'actifs représente pour nous un changement de l'utilisation de Webpack au traitement de JS/Fonts/CSS. Parcel est un bundler comme Webpack, mais en contrepartie d'une flexibilité légèrement inférieure, il a une configuration et une empreinte de fichiers plus petites et se construit plus rapidement ; en fait, il n'existe pas de fichier de configuration Parcel. Le passage à l'utilisation de Hugo pour créer du CSS permet aux sites Hugo d'être développés en dehors d'un processus de construction externe. Cette approche présente des inconvénients, comme indiqué ci-dessous.

Remarques :

• Cette configuration repose sur l'hypothèse que les JS/Fonts sont traités en développement et non en production, même si cela nécessiterait un minimum d'efforts pour le faire.
• Les scripts de package.json incluent le chargement de variables d'environnement avec cross-env qui est facultatif pour certains systèmes (pas Windows) et peut être supprimé en toute sécurité. Remplacez simplement cross-env NODE_ENV=development par NODE_ENV=development

JS

• Utilise le regroupeur de colis.
• Sorties du colis vers assets/output/index.js .
• Hugo est habitué à prendre des empreintes digitales et à créer un hachage sécurisé pour l'intégrité des sous-ressources.
  • Si fileExists "./assets/output/index.js Hugo crée un hachage de ce fichier à partir de layouts/_head/scripts.html .
• Hugo génère le fichier JS traité dans public/output/index.min.[hash].js .

CSS

• Utilise Hugo Pipes, en utilisant PostCSS. REMARQUE : nous utilisons cette méthode car nous utilisons du CSS de classe utilitaire. Par ailleurs, je vous recommande d'utiliser Parcel pour traiter votre CSS. Voir « Comment passer à l'exécution de PostCSS basé sur JS » ci-dessous.
• Utilise Parcel/PostCSS par défaut. Voir « Comment passer à PostCSS basé sur Hugo » ci-dessous.

CSS via Hugo

• Hugo traite assets/css/styles.css avec assets/postcss.config.js , en utilisant Imports, TailwindCSS, Autoprefixer et PurgeCSS.
• Si NODE_ENV=development est présent dans la commande build, PostCSS ne traitera PAS le fichier via PurgeCSS.
• Hugo génère le fichier CSS traité dans public/css/styles.min.[hash].css .

CSS via colis

• Parcel traite assets/css/styles.css avec assets/postcss.config.js , en utilisant Imports, TailwindCSS, Autoprefixer et PurgeCSS.
• Si NODE_ENV=development est présent dans la commande build, PostCSS ne traitera PAS le fichier via PurgeCSS.
• Hugo génère le fichier CSS traité dans assets/output/index.[hash].css .

Polices

• Les polices open source via Typefaces utilisent Parcel Bundler.
• Parcel génère le CSS dans assets/output/index.css et place également les fichiers de polices, hachés, dans le même répertoire.
• Hugo Pipes traite les fichiers dans un répertoire public et crée des liens Prefetch.
  • Si fileExists "./assets/output/index.css Hugo crée les liens de prélecture à partir de layouts/_head/stylesheets.html .
• Hugo génère les polices traitées et le fichier CSS dans public/output/index.min.[hash].css et public/output/font-name.[hash].woff[2] .

Images

• Actifs stockés dans un bucket S3 ou locaux au dépôt, transformés via Imgix.

FAIRE

• Tenez compte des ressources dans _header pour la mise en cache et le préchargement (Scratch est-il viable).
• Assurez-vous que nos commandes package.json sont bien configurées.
• Déterminez le flux de travail pour gérer les polices qui ne sont pas appelées avec le package typography (c'est-à-dire les polices commerciales).

Avantages et inconvénients de l'utilisation de Hugo pour traiter PostCSS

Avantages

• Vous n'avez pas besoin d'exécuter JS pour modifier le CSS, ce qui élimine les décalages de timing lors de la création du CSS.
• Les mises à jour sont plus rapides en développement.

inconvénients

• Doit installer les modules Node juste pour exécuter Hugo.
• Doit exécuter PostCSS (avec les modules Node) pour créer une production sur le serveur, en créant du CSS à chaque modification.
• Crée un fichier CSS distinct pour les styles principaux, en dehors de tous les fichiers CSS générés pour les polices.

Comment passer à l'exécution de PostCSS basé sur Hugo

• Supprimez le fichier CSS principal dans assets/index.js .
• Modifiez les importations Tailwind pour appeler tailwind via @import, plutôt que directement.
• Modifiez le fichier CSS initial layouts/_head/stylesheets.html pour utiliser Hugo (voir les commentaires dans ce fichier).