Release – SGC: Gulp Toolchain V2.4

Release – SGC: Gulp Toolchain V2.4

Philipp Nowinski 07. August 2017 Releases

1 Kommentar // Lesezeit: 5 min.

Nachdem der letzte Release schon wieder etwas her ist, freuen wir uns heute die Version 2.4 unseres Command-Line-Tools SGC veröffentlichen zu können.  Neben einigen Bugfixes, sind dies mal auch wieder ein paar neue Features mit dabei, die uns insbesondere beim Aufbau der Code-Basis für den Relaunch unserer eigenen Website eine große Hilfe waren.

Unter der Haube – Dependency Management

Mit der neuen Version haben wir auch alle node-Dependencies wieder auf den neuesten Stand gebracht. Außerdem setzen wir mit der neuen Version erstmals Yarn als Ergänzung zu NPM ein. Yarn ist ein Paketmanager der aus der React-Welt kommt und das NPM-Ökosystem nutzt. Die Integration in den bestehenden Code war damit relativ einfach und insbesondere das etwas intuitivere CLI machen uns die Arbeit beim bundlen deutlich leichter.

Bessere Konfigurationsmöglichkeiten

Die .sgc-config.json, das Konfigurationsrädchen der Toolchain, haben wir mit dem neuen Release etwas aufgeräumt und erweitert. Für die JavaScript- und CSS-Pipeline, kann jetzt jeweils konfiguriert werden, ob der Code minifiziert werden soll und das Kompilat in eine .min-Datei umbenannt werden soll. Dadurch wird insbesondere die Fehlersuche etwas einfacher, wenn mal was klemmt. Wir hatten in der Vergangenheit bspw. hin und wieder das Problem, dass Google-Font @import-Statements im CSS nicht aufgelöst wurden (der uglify-task importiert solchen Code um Requests zur Laufzeit zu sparen), da der CDN kurzzeitig nicht erreichbar war (der Bug ist übrigens inzwischen gefixt \o/). Durch das temporäre Deaktivieren des minifiers ließ sich der Fehler immer schnell eingrenzen – dazu muss jetzt nur noch ein Setting in der .sgc-config.json geändert werden.

Beim Update müsst ihr übrigens nichts weiter beachten. Das Installations-Skript wird automatisch erkennen, dass ihr eine ältere .sgc-config.json einsetzt und die fehlenden Einträge selbstständig ergänzen.

Bessere Linter

Wovon  unsere Projekte in den letzten Monaten wohl am meisten profitiert haben, sind die eingebauten JavaScript- und Scss-Linter. Mit der Version 2.4. haben wir im JavaScript-Bereich von JsHint zu EsLint gewechselt und im Scss-Bereich von scss-lint zu Stylelint. Im Vergleich zu den alten Tools, sind EsLint und Stylelint um einiges mächtiger. Insbesondere was die Erweiterbarkeit angeht, sind die Tools ein Traum. Konfigurationen lassen sich vererben und es können relativ leicht eigene Regeln hinzugefügt werden. Bestimmte Dinge die wir vorher nicht abprüfen lassen konnten sind somit ein Kinderspiel. Unsere CGL sieht bspw. vor, dass margin- und padding-Deklarationen immer die ersten Anweisungen in einem Style-Block sein müssen, in exakt dieser Reihenfolge. Mit StyleLint ließ sich diese Regel sehr einfach hinzufügen.
Dank der Erweiterbarkeit lässt sich außerdem auf jede neue Gegebenheit schnell reagieren. Wir haben bspw. kürzlich unsere gesamte Modul-Codebase von CommonJS-Modules auf EcmaScript6 Modules umgeschrieben. Ein Werkzeug wie EsLint, das einen bei jeder potentiell unschönen Code-Zeile aus der Konsole heraus anschreit, ist dabei ein wahrer Segen – eben gerade wenn man sich in Gefilde vorwagt wie einem bisher unbekannt waren.

Bei der Installation der SGC wird das Tool euch anbieten unsere Linter-Konfigurationen, die wir in unserem GitLab öffentlich zur Verfügung stellen, zu importieren. Ihr könnt aber natürlich auch eure eigenen Regeln definieren, unsere Konfiguration beerben und erweitern, oder eine andere Konfiguration aus dem Internet beziehen.

Migration von bestehenden Installationen

Nach einem Toolchain-Release heißt es regelmäßig alle bestehenden Projekte zu aktualisieren. Da sich viele Konfigurationen ändern, kann das schnell zur Qual werden. Mit der Version 2.4. kommt auch ein kleiner Upgrade-Wizard, der diese Arbeit übernimmt. Wenn ihr das Installationsskript in einer bestehenden Installation ausführt, wird das Skript dies erkennen und euch ggf. Fragen zum weiteren Vorgehen stellen. Wenn ihr die SGC über Composer bezieht, reicht also ein simples composer update sgalinski/sgc-core, gefolgt von sgc-core/install.sh.

Neue Kommandos

Zwei kleine Helfer haben es ebenfalls in diesen Release geschafft:

sgc releaseExtension --ext {extension_name}

Wenn ihr mit Composer arbeitet, seid ihr vermutlich oft in der Situation die Änderungen an einer Extension als neue Version releasen zu müssen. Die Wahl der korrekten Versionsnummer und das updaten der korrekten Dateien ist zwar theoretisch einfach, führt in der Praxis aber immer wieder zu Fehlern. Allzu oft hatten wir das Problem, dass bspw. für breaking-changes nicht die major Versionsnummer erhöht wurde, Bugfix-Releases als Feature-Release gekennzeichnet wurden, o.ä. Mir selbst geht es oft so, dass ich zwar daran denke die composer.json korrekt anzupassen, aber vergesse das selbe für die ext_emconf.php zu tun.

Der oben genannte Task schafft Abhilfe dafür. Das Kommando startet einen simplen Questionair, der dabei hilft den Release korrekt einzuordnen. Nach Beantwortung der Fragen wird automatisch die korrekte Versionsnummer in beiden Dateien gesetzt. Das Ergebnis muss dann nur noch comittet werden. Ein Task der simpel erscheinen mag, mir persönlich allerdings schon viel Zeit und Nerven gespart hat.

sgc lighthouse

Dieser Task ist aktuell noch als 'experimental' gekennzeichnet. Insbesondere wer sich in letzter Zeit mit dem Thema Progressive Web Apps befasst hat, wird über das Tool Lighthouse aus dem Hause der Google Chrome Engineers gestolpert sein. Lighthouse ist ein Analyse-Tool, ähnlich wie Google Pagespeed Insights, das eure Seite gegen eine Reihe von Metriken laufen lässt und am Ende einen Score und verschiedene Optimierungs-Ratschläge ausspuckt. Mit der aktuellen Chrome Version ist Lighthouse auch Teil der Devtools geworden.

Aktuell macht dieser Task nichts anderes als eure lokale Instanz durch Lighthouse zu jagen und einen Report zu verfassen. Warum Lighthouse in die Toolchain integrieren? Ganz einfach: Lighthouse erlaubt es einem auch eigene Metriken zu schreiben und hier zu integrieren. Dieser Task ist also mehr eine Vorschau auf das was in künftigen Releases noch kommen wird – also bleibt dran ;-)

SGC Version X

Die Entwicklung der SGC geht weiter und wir sind noch lange nicht am Ende. Wie immer freuen wir uns über Feedback, Feature-Requests und Bug-Reports in unserem Bugtracker.

Get it while it's hot

Kunden können sich den neuen Release ab sofort in unserem Shop herunterladen. Bei Fragen rund um die SGC, oder unseren anderen Produkten, kannst du auch gerne jederzeit Kontakt mit uns aufnehmen.


1 Kommentar

Dateien hier ablegen
Dateien hochladen
  • Stefan Galinski

    Stefan Galinski

    am 07.08.2017

    Awesome Release, Philipp! :-) Awesome Release, Philipp! :-)

    Dateien hier ablegen
    Dateien hochladen