hugo pipes parcel

Der neue dynamische Hugo Starter – Hugo Pipes Setup mit Parcel.

Beachten Sie, dass es bei diesem Repo nur um die Demonstration einer Asset-Pipeline geht und es nicht um einen Komplettstarter geht. Machen Sie damit, was Sie möchten, aber denken Sie daran, dass hier alles auf unseren internen Arbeitsablauf ausgelegt ist.

Wir verwenden für alle unsere Projekte ein Changelog. Bitte sehen Sie sich diese Datei für Aktualisierungen an.

Werkzeuge

• Hugo – Ein in Go geschriebenes, universelles Website-Framework, das statische Webseiten generiert.
• Parcel – Ein „blitzschneller“ Webanwendungs-Bundler ohne Konfiguration.
• PostCSS | TailwindsCSS (Bibliothek JS-basierter CSS-Klassen) | PurgeCSS (entfernt nicht verwendetes CSS)
• KyleAMathews/typefaces (OS-Schriftarten lokal laden mit einem kleinen require )

Hugo Asset Pipeline

Dieses Setup nutzt Parcel für die Verarbeitung von Javascript und Open-Source-Schriftarten, Hugo Pipes + PostCSS für die CSS-Verarbeitung und npm-run-all um Parcel und Hugo parallel auszuführen (siehe Hinweis unten). Wir verwenden den Yarn-Paketmanager, Sie können aber auch NPM verwenden, wenn Sie möchten.

Diese Asset-Pipeline bedeutet für uns eine Umstellung von der Verwendung von Webpack auf die Verarbeitung von JS/Fonts/CSS. Parcel ist ein Bundler wie Webpack, hat aber als Kompromiss für etwas weniger Flexibilität eine kleinere Konfiguration und einen geringeren Dateibedarf und lässt sich schneller erstellen; Tatsächlich gibt es keine Parcel-Konfigurationsdatei. Durch die Umstellung auf die Verwendung von Hugo zum Erstellen von CSS können Hugo-Sites außerhalb eines externen Erstellungsprozesses entwickelt werden. Dieser Ansatz weist Nachteile auf, die im Folgenden erläutert werden.

Hinweise:

• Diese Konfiguration basiert auf der Annahme, dass JS/Fonts in der Entwicklung und nicht in der Produktion verarbeitet werden, obwohl dies nur minimalen Aufwand erfordern würde.
• Die Skripte in package.json umfassen das Laden von Umgebungsvariablen mit cross-env , was für einige Systeme (nicht Windows) optional ist und sicher entfernt werden kann. Ersetzen Sie einfach cross-env NODE_ENV=development durch NODE_ENV=development

JS

• Verwendet Parcel Bundler.
• Paketausgaben an assets/output/index.js .
• Hugo wird verwendet, um Fingerabdrücke zu erstellen und einen sicheren Hash für Subresource Integrity zu erstellen.
  • Wenn fileExists "./assets/output/index.js Hugo erstellt einen Hash dieser Datei aus layouts/_head/scripts.html .
• Hugo gibt die verarbeitete JS-Datei an public/output/index.min.[hash].js aus.

CSS

• Verwendet Hugo Pipes und PostCSS. HINWEIS: Wir verwenden diese Methode, weil wir CSS der Utility-Klasse verwenden. Ansonsten empfehle ich Ihnen, Parcel zur Verarbeitung Ihres CSS zu verwenden. Siehe „So wechseln Sie zur Ausführung von JS-basiertem PostCSS“ weiter unten.
• Verwendet standardmäßig Parcel/PostCSS. Siehe „So wechseln Sie zu PostCSS auf Hugo-Basis“ weiter unten.

CSS über Hugo

• Hugo verarbeitet assets/css/styles.css mit assets/postcss.config.js und nutzt dabei Imports, TailwindCSS, Autoprefixer und PurgeCSS.
• Wenn NODE_ENV=development im Build-Befehl vorhanden ist, verarbeitet PostCSS die Datei NICHT über PurgeCSS.
• Hugo gibt die verarbeitete CSS-Datei an public/css/styles.min.[hash].css aus.

CSS über Parcel

• Parcel verarbeitet assets/css/styles.css mit assets/postcss.config.js und nutzt dabei Imports, TailwindCSS, Autoprefixer und PurgeCSS.
• Wenn NODE_ENV=development im Build-Befehl vorhanden ist, verarbeitet PostCSS die Datei NICHT über PurgeCSS.
• Hugo gibt die verarbeitete CSS-Datei an assets/output/index.[hash].css aus.

Schriftarten

• Open-Source-Schriftarten über Typefaces verwenden Parcel Bundler.
• Parcel gibt CSS an assets/output/index.css aus und legt auch die gehashten Schriftartdateien im selben Verzeichnis ab.
• Hugo Pipes verarbeitet Dateien in einem öffentlichen Verzeichnis und erstellt Prefetch-Links.
  • Wenn fileExists "./assets/output/index.css Hugo erstellt die Prefetch-Links aus layouts/_head/stylesheets.html .
• Hugo gibt die verarbeiteten Schriftarten und CSS-Dateien an public/output/index.min.[hash].css und public/output/font-name.[hash].woff[2] aus.

Bilder

• Assets, die in einem S3-Bucket oder lokal im Repo gespeichert sind und über Imgix transformiert werden.

TODO

• Berücksichtigen Sie Ressourcen im _header für das Caching und das Vorladen (ist Scratch realisierbar).
• Stellen Sie sicher, dass unsere package.json-Befehle ordnungsgemäß eingerichtet sind.
• Bestimmen Sie den Workflow für die Verwaltung von Schriftarten, die nicht mit dem Typogpraphy-Paket aufgerufen werden (z. B. kommerzielle Schriftarten).

Vor- und Nachteile der Verwendung von Hugo zur Verarbeitung von PostCSS

Vorteile

• Sie müssen JS nicht ausführen, um CSS zu ändern, wodurch zeitliche Diskrepanzen beim Erstellen von CSS vermieden werden.
• Updates sind schneller in der Entwicklung.

Nachteile

• Um Hugo auszuführen, müssen Knotenmodule installiert werden.
• Sie müssen PostCSS (mit Node-Modulen) ausführen, um die Produktion auf dem Server zu erstellen und bei jeder Änderung CSS zu erstellen.
• Erstellt neben allen für Schriftarten generierten CSS-Dateien eine separate CSS-Datei für die Hauptstile.

So wechseln Sie zur Ausführung von Hugo-basiertem PostCSS

• Entfernen Sie die Haupt-CSS-Datei nach assets/index.js .
• Ändern Sie Tailwind-Importe so, dass Tailwind über @import und nicht direkt aufgerufen wird.
• Ändern Sie die anfängliche CSS-Datei layouts/_head/stylesheets.html um Hugo zu verwenden (siehe Kommentare in dieser Datei).