Mein Netlify Build bringt Sass zum Laufen

Nehmen wir an, Sie möchten eine Website mit Eleventy als Generator erstellen. Eine beliebte Wahl heutzutage! Eleventy hat keine besonders bevorzugte Methode zur Vorverarbeitung Ihres CSS, falls Sie das tun möchten. Es gibt verschiedene Möglichkeiten, dies zu tun, und vielleicht gehört diese Freiheit zum Geist von Eleventy.

Ich habe Leute gesehen, die dafür Gulp eingerichtet haben, was cool ist, ich benutze und mag Gulp immer noch für manche Dinge. Ich habe jemanden gesehen, der Templating verwendet, um vorverarbeitetes CSS zurückzugeben, was seltsam erscheint, aber hey, was funktioniert. Ich habe sogar jemanden gesehen, der die Eleventy-Konfiguration erweitert, um die Verarbeitung auszuführen.

Bisher erschien es mir am sinnvollsten, npm-Skripte für die Sass-Verarbeitung zu verwenden. Zuerst das CSS, dann das HTML, mit npm-run-all. Sie würden also etwas wie dieses in Ihrer package.json einrichten

  "scripts": {
    "build": "npm-run-all build:css build:html",
    "build:css": "node-sass src/site/_includes/css/main.scss > src/site/css/main.css",
    "build:html": "eleventy",
    "watch": "npm-run-all --parallel watch:css watch:html",
    "watch:css": "node-sass --watch src/site/_includes/css/main.scss > src/site/css/main.css",
    "watch:html": "eleventy --serve --port=8181",
    "start": "npm run watch"
  },

Ich finde das ziemlich gut. Da Eleventy sowieso keine bevorzugte CSS-Verarbeitungsmethode hat, fühlt es sich in Ordnung an, sie von der Eleventy-Verarbeitung zu entkoppeln.

Aber ich sehe, dass Netlify mit seinen Build-Plugins gut vorangekommen ist. Wie Sarah es ausdrückte

Das Build-Plugin gibt Ihnen Zugriff auf wichtige Zeitpunkte während dieses Prozesses, zum Beispiel onPreBuild, onPostBuild, onSuccess und so weiter. Sie können zu diesen spezifischen Zeitpunkten eine Logik ausführen.

An dieser Struktur ist etwas *wirklich Intuitives und Schönes*. Viele Build-Plugins werden von der Community oder von Netlify selbst erstellt. Sie aktivieren sie einfach über die Benutzeroberfläche oder verweisen sie in Ihrer Konfiguration. Aber Sass ist (zum Zeitpunkt des Schreibens) kein integriertes Projekt, was ich annehme, weil die Leute sehr meinungsverschieden darüber sind, was/wo/wie ihre CSS verarbeitet wird, sodass es sinnvoll ist, die Leute es selbst machen zu lassen. Machen wir das also.

In unserem Projekt würden wir ein Verzeichnis für unsere Plugins erstellen und dann einen Ordner für dieses spezielle Plugin, das wir schreiben möchten.

project-root/
  src/
  whatever/
  plugins/
    sass/
      index.js
      manifest.yml

In dieser index.js-Datei schreiben wir unseren Code und wir möchten hier speziell den `onPreBuild`-Hook verwenden, weil wir möchten, dass unser Sass vorverarbeitet wird, *bevor* der Build-Prozess Eleventy ausführt und Eleventy die Dinge verschiebt.

module.exports = {
  onPreBuild: async ({ utils: { run } }) => {
    await run.command(
      "node-sass src/site/_includes/css/main.scss src/site/css/main.css"
    );
  },
};

Hier ist ein Blick auf alle relevanten Dateien zusammen.

Wenn ich nun netlify build von der Befehlszeile ausführe, wird derselbe Build-Prozess ausgeführt, den Netlify selbst ausführt, und es wird in mein Plugin eingehakt und ausgeführt!

Eine kleine Sache, die mir aufgefallen ist: Ich habe versucht, mein Konfiguration im (neueren) netlify.yml-Format zu haben, aber die Plugins funktionierten nicht, und ich musste die Konfiguration als netlify.toml neu erstellen.

Wir haben uns also mit dieser spezifischen Verarbeitung von Eleventy entkoppelt und uns an Netlify gekoppelt. Nur zur Information. Das gefällt mir, da diese Art der Konfiguration eines Builds so schön ist und ich darin viel Potenzial sehe.

Ich bevorzuge die explizitere und aufgeteiltere Konfiguration dieses Stils. Schauen Sie sich nur an, wie viel sauberer die package.json wird.

Ich habe immer noch diese Idee...

...eine Website zu erstellen, die ein selbstreferenzielles Beispiel für all die Dinge ist, die man während eines Build-Prozesses tun könnte/sollte. Ich habe die Website hier gestartet (und das Repository), aber sie tut noch nicht viel. Ich denke, es wäre cool, alles auf dieser Liste (und mehr?) über Build-Plugins zu verdrahten.

Wenn Sie beitragen möchten, können Sie mir gerne Bescheid geben. Vielleicht senden Sie mir eine E-Mail oder eröffnen Sie ein Issue, um darüber zu sprechen, was Sie tun möchten. Sie können auch einen Pull Request machen, aber PRs ohne vorherige Kommunikation sind manchmal etwas schwierig, da es schwieriger ist, sicherzustellen, dass unsere Visionen übereinstimmen, bevor Sie viel Aufwand betreiben.