SGC – Command Line Task Runner

Die SGC ist das Herzstück unserer Entwicklungsumgebung. Das Kommandozeilen-Interface stellt einen zentralen Punkt zur Verfügung, über den alle für die Entwicklung relevanten Tasks ausgeführt werden können. Bereits integriert ist ein auf Node.js 10 basierter Build-Prozess, der sich um die täglichen Aufgaben der Webentwicklung, wie das Optimieren von Bildern, kompilieren von Sass und ES6 JavaScript-Code, Linting und vieles mehr kümmert. Um Tasks die über das eingebaute Tooling hinausgehen zu integrieren, lässt sich das Programm ganz einfach mit Shell- oder Node.js-Skripts um eigene Kommandos erweitern.

Die SGC legt einen klaren Fokus auf den Einsatz in TYPO3-Projekten, mit einigen Einstellungen in der Konfigurations-Datei, lässt sich das Tool jedoch auch für andere Systeme nutzen. Seit der Version 3 ist es ebenso möglich die SGC als Standalone-Tool zur Arbeit mit bspw. statischen HTML-Dateien einzusetzen. Dieses Feature kann insbesondere bei Rapid-Prototyping von Nutzen sein.

Die Editionen im Vergleich

Features

Basis-Version

Enterprise-Version

Kostenlos

ab 299,99 €

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 dem selben 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.

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

JavaScript

  • Unterstützung eines Workflows der das Schreiben von modularem JavaScript fokussiert.
  • Benutzen Sie Features der brandneuen ES6-Spezifikation wie Klassen, import/export, async/await und die SGC wandelt 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

  • Kompilieren von Sass-Dateien in CSS
  • Automatisches hinzufügen von Vendor-Prefixes
  • Inline-SVG-Engine zum automatischen Einbinden von SVG-Icons als background-image
  • Image-Dimensions plugin welches das Benutzen von image-width und image-height Funktionen im CSS ermöglicht
  • Integrierte Lösung zur Generierung von inline-CSS (nützlich zur Einbindung von abovethefold-styles)
  • Minifizieren der CSS-Dateien

Permanente formale Qualitätskontrolle (Linting)

Eine saubere Code-Basis sollte sich so lesen, als wäre sie von einem einzelnen Entwickler geschrieben worden – selbst bei einem Projekt mit mehreren 100 Beteiligten. Dazu ist es wichtig, dass der Code bestimmte formale Anforderungen erfüllt. Ein konstanter Kommentar-Stil, konsistente Einrückungen, aber auch die Verwendung oder Nichtverwendungen bestimmter Konstrukte lassen eine Code-Basis kohärenter erscheinen und erleichtern das Einlesen und Refaktorieren.

Ebenfalls lassen sich durch die Prüfung formaler Kriterien sogenannte "Code Smells" vermeiden. Das Setzen einer transition auf einer CSS-Eigenschaft die sich nicht performant animieren lässt, sollte beispielsweise vermieden werden.

Die SGC integriert ESLint und Stylelint, zwei Linter die Sass- und JavaScript-Code auf vordefinierte Regeln prüfen und Verstöße noch während des Schreibens ankreiden. Die Regeln können Sie dabei gemäß Ihrer CGL selbst festlegen, oder Sie verwenden einfach 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. 

Roadmap & Lizenz

Die SGC wird permanent weiterentwickelt und verbessert. Ihnen fehlt ein Feature, oder Sie haben Verbesserungsvorschläge? – Gerne können Sie Kontakt mit uns aufnehmen, oder ein Issue in unserem Bugtracker anlegen.

Folgende Features sind bereits für die kommenden Versionen geplant:

  • Integration einer soliden Infrastruktur für Unit- und Integrationstests
  • TypeScript Integration in ES6 Modulen
  • Integration von Parker zur besseren CSS-Analyse
  • und vieles mehr

 

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.

License Details