Logbuch

Contao Websites mit Mamp, Grunt, Vite oder Webpack entwickeln

Warum ich Grunt verwende. Ganz einfach, weil es ein mehrteiliges Tutorial auf youtube gab, das mir die Abläufe und Konfiguration verständlich erklärte und so ziemlich genau dem entsprach, wie ich arbeiten wollte. Das ist nun auch schon über 8 Jahre her und bisher hat mich Grunt eigentlich nie im Stich gelassen. Hier und da zickten mal einzelne Module und mussten ersetzt werden, aber irgendwo im Netz fand man immer eine Lösung. Und den Rest passte ich einfach an.

Die Frage ist nur. Wie lange geht das gut, wo sich eine Flut an neuen Systemen/Methoden etabliert hat und man sich nie sicher sein konnte, ob Grunt und die für mich notwendigen Module weiterentwickelt werden. Und mir stand noch der Wechsel auf Apple Silicon bevor und ich war mir nicht sicher, ob dann überhaupt noch was funktioniert. Wahrscheinlich habe ich auch deswegen solange gewartet, auf meinem Intel MacBook Pro funktionierte alles reibungslos. Nun war aber lag der Studio M4 im Warenkorb und da musste ich mich konkret damit beschäftigen - allein für den Notfall. Wen ähnliche Bedenken bedrücken, dem kann ich Entwarnung geben. Grunt flutsch auf meiner neuen Kiste ziemlich gut. Also da muss man sich keine Sorgen machen. Aber jetzt war ich schon dran, also zog ich es durch.

In einigen Online-Weiterbildungskursen ist mir immer wieder Webpack über den Weg gelaufen und zumindest für diese Kurse habe ich es verwendet. Warm geworden bin ich damit aber nie, schon alleine deswegen, weil selbst die Tutoren immer wieder aus dem Nichts mit Kommentaren: "oh, da müssen wir noch kurz das und hier und da installieren, importieren und verknüpfen" und ich mich öfters fragte: "Wie kommt der jetzt darauf und woher weiß er, dass genau das fehlt". Nö, Webpack war nicht meins.

Das soll kein Kriterium für andere sein, aber Webpack ist meiner Ansicht nach nicht für Einsteiger ohne Vorkenntnisse geeignet, für Fortgeschrittene mag dies die perfekte Lösung sein. Wer dennoch mal Contao in Verbindung mit Webpack testen möchte, Dennis von Erdmann & Freunde hat sich an das Thema herangewagt und ein Setup auf GitHub bereitgestellt.

Dann war da noch Vite, über das ich immer wieder mal gestolpert bin und das mir sehr sympathisch war. Also machte ich mich ran, schließlich hat auch bei mir seit einiger Zeit die KI das ewige Google-Suchen beim entwickeln ersetzt und zusammen mit ChatGPT oder Copilot wird das schon funktionieren.

Ich könnte jetzt hier einfach nur mein Setup posten, aber das ist zu individuell, als das es so einfach auf andere übertragbar wäre. Aber den Ablauf könnt ihr gerne als Inspiration verwenden.

Ablauf:
Um der KI mitzuteilen, was ich wollte, habe ich zuerst ein paar Infos zusammengestellt, wie ich aktuell mit Grunt arbeite.

1. MampPro stellt den Webserver für die Contao Installation zur Verfügung
2. Grunt überwacht die Erstellung von Javascript und Sass, erstellt daraus komprimierte Einzeldateien und kopiert diese in ein bestimmtes Verzeichnis auf dem Webserer -> ..../files/Layout/
3. Im Anschluß triggert Browsersync einen automatischen Reload aller Browser.
4. Ist die Seite vom lokalen Mamp-Server auf den Liveserver gewandert, stelle ich innerhalb vom Grunt des Task von lokal auf live um, somit werden die Dateien automatisch per FTP auf dem Liveserver ersetzt, Browsersync und lokales kopieren entfallen.
5. Mittels "tree" (brew install tree) erzeugte ich eine Dateistruktur eines Grunt-Projektes, damit die KI verstehen konnte, wo meine CSS- bzw. Sass- und Javascript-Dateien liegen und wie alles miteinander verbunden ist.
6. Ein Gruntfile mit der Konfiguration und den Abläufen stellte ich der KI ebenfalls zur Verfügung.

Tja und sagte ich halt der KI, ob sie mir diesen Arbeitsablauf für Vite generieren kann und hangelte mich durch. Das ganze hat einen halben Tag gedauert. Als dann alles lief, ging es noch um Feinheiten wie das Auslagern von Pfaden in eine eigene Config-Datei, damit ich das Grundgerüst beibehalten kann und lediglich in dieser Datei nur die Pfade, FTP-Zugangsdaten und die Proxy-Url für den Webserver eintragen musste. Und halt so ein Kram wie Logs im Terminal. Nichts, was man unbedingt machen muss, aber wenn man schonmal dran ist, will man es ja auch schön haben.

Fazit:
- Es ist mit Vite problemlos möglich, solch eine Umgebung nachzubauen
- Alles funktioniert reibungslos und schnell, sehr schnell.
- Das Anlegen eines neuen Projektes dauert keine 5 Minuten - dauerte mit Grunt aber auch nicht länger
- Der Arbeitsablauf ist gleich geblieben, alle Prozesse werden zentral gesteuert, es gibt einen Terminal-Aufruf für die lokale Entwicklung und einen für die Live-Server Umgebung, bei Grunt war es nur einer, dafür musste ich im Grunfile einen Task umstellen.

Ich bleibe bei Vite. Es ist modern, schnell, einfach und für mich nachvollziehbar, was bei zukünftigen Updates und damit möglicherweise auftretenden Problemen Priorität hat.

Tipps:
- Ich würde auf jeden Fall eine KI zu Rate ziehen. Wer bisher noch nicht auf eine zählen kann oder aus Kostengründen wollte, sollte sich mal abacus.ai ansehen. Dort bekommt man für 10$ im Monat Zugriff auf mehrere KI-Modelle (> 19), auch auf solche zur Bild- und Video-Generierung, angefangen bei ChatGPT und Flux. Viele sonst einzeln kostenpflichtige Modelle sind dort enthalten. GitHub-Copilot ist ebenfalls für 10€ möglich, aber abacus.ai bietet eine Menge mehr Modelle für das gleiche Geld. Eine kostenlose KI würde ich nicht empfehlen, da man schon einige Prompts hinter sich bringen muss, bis alles funtkioniert und wenn zwischendurch der Free-Account aufgebraucht ist und das Modell in ein schwächeres wechselt, kann das ziemlich frutsierend werden.

Ich drück die Daumen
Phil

 

 

Kommentare

Bitte rechnen Sie 8 plus 1.
Über neue Kommentare per E-Mail benachrichtigen (Sie können das Abonnement jederzeit beenden)