Wenn man einen Build-Prozess für eine Website zusammenstellt, ist es unglaublich nützlich, sich die Prozesse anderer Leute anzusehen. Ich bin neulich auf Andrew Welchs Artikel „An Annotated webpack 4 Config for Frontend Web Development“ gestoßen und war froh, dass er ihn veröffentlicht hat. Wenn ich eine neue Website mit einem Webpack-Build starten würde, würde ich mich fast sicher an so etwas orientieren, anstatt bei Null anzufangen. Gleichzeitig wurde mir bewusst, wie sehr Build-Prozesse *unterschiedliche* Bedürfnisse haben und wie einzigartig diese Bedürfnisse im Vergleich zu vor ein paar Jahren, in der Blütezeit von Grunt- und Gulp-Build-Prozessen, sind.
Ich habe nach einer kommentierten Gulp-Referenzdatei gesucht und bin auf einen weiteren Artikel von Andrew gestoßen – „A Gulp Workflow for Frontend Development Automation“ – nur ein Jahr zuvor! Hier ist eine vereinfachte Liste dessen, was er mit Gulp gemacht hat (was er im Beitrag ausführlicher erklärt)
- Sass kompilieren
- Autoprefixer ausführen
- Sourcemaps erstellen
- Minifizieren
- Kritische CSS-Teile und Skript-Schnipsel einfügen
- Babel ausführen
- Uglifizieren
- Styles-Injection/Reloading durchführen
- Barrierefreiheits-Audit durchführen
- Icon-Font generieren
- Bilder optimieren
Apropos Gulp und kommentierte Build-Prozesse: Ich arbeite gerade an einem Redesign von CSS-Tricks und habe mich aus verschiedenen Gründen für einen Gulp-Build entschieden. Gegen besseres Wissen habe ich ihn von Grund auf neu geschrieben, und so weit bin ich gekommen. Er fühlt sich nicht besonders robust oder effizient an, daher sind Überarbeitungen und Vorschläge willkommen! Und apropos Gulp: Hier ist ein kürzlich veröffentlichtes Boilerplate, das ich gerne gesehen hätte, bevor ich angefangen habe.
Jetzt, ein Jahr später, sind das die Aufgaben, die der Build-Prozess erfüllen muss
- Unterschiedlich konfigurierte Webserver ausführen
- Hot Module Replacement
- Dynamische Code-Splitting
- Lazy Loading
- Moderne und Legacy-Code-Bundles erstellen
- Cache Busting
- Service Worker erstellen
- PostCSS kompilieren
- Bilder optimieren / .webp erstellen
- .vue-Dateien verarbeiten
- Tailwind und PurgeCSS ausführen
Es ist lustig, wie schnell sich die Dinge ändern. Wir bitten immer noch im Wesentlichen um Hilfe beim Kompilieren von Dateien und beim Optimieren von Dingen, aber die Werkzeuge, die wir verwenden, ändern sich, der Code, den wir schreiben, ändert sich, die Art und Weise, wie wir über Entwicklung sprechen, ändert sich, die Erwartungen an die Entwicklung ändern sich, die Best Practices ändern sich… das lässt einen schwitzen. 😅
Ich bin bei weitem kein Gulp-Meister, aber ein Plugin, das ich gefunden habe und das meine Gulp-Datei etwas einfacher zu verwenden macht, ist gulp-load-plugin. Es ist praktisch, da man nicht jedes Plugin manuell zuweisen muss, bevor man es verwendet. Man macht einfach etwas wie das hier:
var gulp = require (“gulp”);
// $ zu gulp-load-plugins zuweisen
var $ = require(”’gulp-load-plugins”)();
// Jetzt jedes andere Gulp-Plugin verwenden
// .pipe($.some-plugin()
// Also wird gulp-sass zu $.sass()
Hier ist eine schöne Beschreibung: https://andy-carter.com/blog/automatically-load-gulp-plugins-with-gulp-load-plugins
Ich habe auch damit angefangen, eine Gulp-Datei von Grund auf neu zu schreiben und viele Stunden damit verbracht, sie zu perfektionieren. Dann kam Gulp v4 heraus und viele Dinge änderten sich. Danach beschloss ich, nach einem Boilerplate wie https://github.com/ahmadawais/WPGulp zu suchen, das gut kommentiert ist, so dass man nachvollziehen kann, wie es funktioniert.