SGC – Command Line Task Runner

Die SGC ist ein Kommandozeilen-Interface, das einen zentralen Punkt darstellt, über den alle entwicklungs­relevanten Tasks ausgeführt werden können. Bereits integriert ist ein Node.js 10 basierter Build-Prozess, der sich um Aufgaben, wie das Optimieren von Bildern, Kompilieren von Sass und ES6 JavaScript-Code, Linting und vieles mehr kümmert. Um Tasks zu integrieren, die über das eingebaute Tooling hinausgehen, lässt sich das Programm mit Shell- oder Node.js-Skripts um eigene Kommandos erweitern. Die SGC fokussiert TYPO3-Projekte – mit einigen Einstellungen in der Konfigurations­datei lässt es sich auch in anderen Systemen nutzen. Seit Version 3 kann die SGC als Standalone-Tool zur Arbeit mit bspw. statischen HTML-Dateien genutzt werden. Das ist insbesondere bei Rapid-Prototyping von Vorteil.

Die Editionen im Vergleich

Features

Basis-Version

Enterprise-Version

Kostenlos

auf Anfrage

Einfache Installation

Styles / SCSS

JavaScript (ES6 Syntax + Module)

JS / SCSS Linting

Live Reload

Komprimierung von JS- und CSS-Dateien

"Above the Fold"-Konfiguration

Bildoptimierung

Erweiterbarkeit

Unterstützung von Open Source-Projekten

Ohne Werbung


Werde jetzt Frontend-Master

SCSS, EcmaScript 6, modulares JavaScript, Linting – führen diese Worte bei dir zu Falten auf der Stirn?

Keine Sorge! Die Technologien der modernen Frontend-Entwicklung entwickeln sich so schnell, dass es manchmal hart ist auf dem aktuellen Stand zu bleiben. Gerne können wir dir eine Schulung zu diesem Thema anbieten, in der du und / oder dein Team lernt wie ihr euren Frontend-Workflow auf das nächste Level hieven könnt und wie die SGC euch dabei unterstützen kann.
 

Jetzt eine Schulung anfragen

Die Features

Einfache Installation

Dank des mitgelieferten Installers ist das Aufsetzen der Entwicklungsumgebung einfach. Das Installations-Skript ermittelt selbstständig die erforderliche Node.js Version und installiert diese gleich mit. Dank des Einsatzes des Node Version Managers können problemlos verschiedene Versionen der SGC auf demselben System parallel betrieben werden. Eine separate Installation von Node.js ist nicht notwendig. Es kann zwischen einer globalen und lokalen Installation des sgc-Kommandos gewählt werden.

Die SGC unterstützt derzeit die Installation und Nutzung auf Linux- und macOS-Systemen.

Erweiterbarkeit

Mit Hilfe des eingebauten Plugin-Systems kann die SGC einfach um eigene Kommandos erweitert werden. Hierzu wird einfach ein Shell-Skript im sgc-scripts Ordner abgelegt. Custom-Tasks können dann über den Befehl

sgc <scriptName>

ausgeführt werden. Auf diese Weise lassen sich beispielsweise eigene Deployment- oder Update-Prozesse integrieren.

Live-Reload

Die SGC überwacht Ihre .scss- und .js-Dateien und startet automatisch den Kompilierungs-Prozess. Sobald dieser fertig ist, wird die Website im Browser automatisch mit den vorgenommenen Änderungen aktualisiert. Ein manuelles hin- und herspringen zwischen Browser und Code-Editor ist somit nicht mehr notwendig – insbesondere für Multi-Monitor Setups eine Erleichterung des Workflows.

Sie konzentrieren sich auf den wichtigsten Task – das Schreiben von Code. Die SGC übernimmt den Rest!

JavaScript

Die SGC unterstützt einen Workflow, der das Schreiben von modularem JavaScript fokussiert. Wenn Sie Features der brandneuen ES6-Spezifikation wie Klassen, import/export, async/await und die SGC nutzen, wandelt das Tool Ihren Code via Bable.js automatisch in ES5-kompatibles JS um, das auch in älteren Browsern funktioniert. Welche Browser Sie unterstützen möchten, legen Sie dabei einfach in der Konfigurations-Datei fest.

Styles / SCSS

Die SGC kompiliert Sass-Dateien in CSS und fügt automatisch Vendor-Prefixes hinzu. Die Inline-SVG-Engine bindet automatisch SVG-Icons als background-image. Das Image-Dimensions plugin ermöglicht das Benutzen von image-width und image-height Funktionen im CSS. Die SGC beinhaltet außerdem eine integrierte Lösung zur Generierung von inline-CSS (nützlich zur Einbindung von abovethefold-styles). CSS-Dateien werden minifiziert.



Linting

Eine Code-Basis sollte so sein, als wäre sie von einem Entwickler geschrieben worden. Dazu muss der Code bestimmte formale Anforderungen erfüllen: Konstanter Kommentar-Stil, konsistente Einrückungen und Verwenden/Nichtverwenden bestimmter Konstrukte lassen eine Code-Basis kohärent erscheinen und erleichtern das Einlesen und Refaktorieren. Durch Prüfung formaler Kriterien lassen sich "Code Smells" vermeiden, so wie z. B. das Setzen einer transition auf einer CSS-Eigenschaft, die sich nicht performant animieren lässt.

Die SGC integriert ESLint und Stylelint, zwei Linter die Sass- und prüft den JavaScript-Code auf vordefinierte Regeln. Auf Abweichungen wird während des Schreibens hingewiesen. Die Regeln können Sie gemäß Ihrer CGL selbst festlegen oder Sie nutzen unsere Presets.

Bild-Optimierung

Eines der größten Performance-Probleme auf modernen Websites ist die Verwendung von nicht-optimierten Bildern.

Mit dem Task sgc images können Sie automatisiert die Kompression Ihrer Bilder erhöhen sowie Informationen entfernen, die zur Anzeige im Web nicht benötigt werden.

Lizenz

Die Nutzung der Enterprise-Version (ohne Werbung) erfordert die Zahlung einer Gebühr. Die Basis-Version ist kostenfrei nutzbar. Mit dem Kauf der Enterprise-Version wird nicht nur die Weiterentwicklung der SGC unterstützt, sondern auch unsere Beiträge zu anderen zahlreichen OpenSource-Projekten.

Kontaktieren Sie uns

Unsere Produkte haben Sie überzeugt und Sie möchten ihr nächstes Webprojekt oder Ihre individuelle Software-Idee gemeinsam mit uns realisieren? – Dann kontaktieren Sie uns für ein unverbindliches Angebot!