SGC – Command Line Task Runner

The SGC is the heart of our development environment. The command line interface provides a central point where all tasks relevant for the development can be executed. The SGC contains a complete Node.js 10 based build process that sorts out the daily web development tasks such as the compilation of Sass and ES6 JavaScript code, linting and many more. In order to integrate tasks in addition to the integrated tooling, the program can be expanded simply through Shell or  Node.js scripts.

The SGC puts a clear focus on the usage of TYPO3 projects, but with a few settings of the configuration file, the tool can be used for other systems as well. Since version 3 it is also possible to use the SGC as a standalone tool for working with, for example, static HTML files. This feature can be especially handy for rapid prototyping.

A Comparison of the Editions

Features

Base Version

Enterprise Version

Free of charge

from €299.99

Easy to install

Styles / SCSS

JavaScript (ES6 Syntax + Module)

JS / SCSS Linting

Live Reload

Compression of JS and CSS files

"Above the Fold" configuration

Image Optimization

Expandability

Support of Open Source Projects

Ad-free


Become a Frontend Master now

SCSS, EcmaScript 6, modular JavaScript, Linting – do these words cause wrinkles on your forehead?

Don't worry! The modern frontend development technologies evolve so quickly that it's hard to stay up-to-date. We are happy to offer training for you in this subject where you and/or your team learn how you can bring your frontend workflow to the next level and how the SGC can support you in this process.

 

 Request a training session now

The Features

Easy to Install

Thanks to the included installer, setting up the development environment is easy. The installation script automatically determines the required Node.js version and installs it at the same time. Thanks to the use of the Node Version Manager, various versions of the SGC can be run on the same system parallely without any problems. A separate installation of Node.js is not necessary. You can choose between a global and a local installation of the sgc command.

The SGC currently supports installation and use on Linux and macOS systems.

Expandability

With the help of the built-in plugin system the SGC can easily be extended with your own commands. For this purpose a shell script is simply stored in the sgc-scripts folder. With the command

sgc <scriptName>


you can execute your custom tasks. In this way, you can integrate your own deployment or update processes, for example.

Live Reload

The SGC watches your .scss and .js files and automatically starts the compiling process. Once it is finished, the website is automatically reloaded in the browser with the new changes.
This means it is no longer necessary to jump between the browser and the code editor - a significant workflow improvement, especially for multi-monitor setups.

Focus on the important task: writing code. The SGC handles the rest!

JavaScript

  • Support of a workflow focusing on writing modular JavaScript
  • Use features of the brand-new ES6 specifications like classes, import/export, async/await, and the SGC automatically converts it into ES5 compatible JS via Babel.js which also works in older browsers.
  • You can easily determine which browsers you want to support in the configuration file.

Styles / SCSS

  • Compiling Sass Files in CSS
  • Automatic addition of vendor prefixes
  • Inline SVG engine for automatic integration of SVG icons as background image
  • Image-Dimensions plugin which allows using image-width and image-height functions in CSS
  • Integrated solution for generating inline CSS (useful for integrating abovethefold-styles)
  • Minify CSS files

Permanent Formal Quality Control (Linting)

You should be able to read a clean code base as if it was written by a single developer - even in a large project with more than 100 people involved. To achieve this, it is important that the code fulfills specific formal requirements. A constant comment style, consistent indentations and the usage or non-usage of specific constructs let a code base appear coherent and simplify reading and refactoring code.

By checking formal criteria, you can also avoid so-called "code smells". For example, you should avoid putting a transition on a CSS property that can't be animated performantly.

The SGC integrates ESLint and Stylelint, two linters that check Sass and JavaScript code for violations of predefined rules while the code is being written. You can set these rules according to your CGL yourself or you can simply use our presets.

Image Optimization

One of the most significant performance issues on modern websites is the use of non-optimized images. With the task sgc images, you can automatically increase the compression of your images and remove information that is not needed for the display on the web.

Roadmap & License

The SGC is constantly being further developed and improved. Are you missing a feature, or do you have suggestions for improvement? - You are welcome to contact us or create an Issue in our bugtracker.

The following features are already planned for upcoming versions:

  • Integration of a solid infrastructure for unit and integration tests
  • TypeScript integration in ES6 modules
  • Integration of Parker for better CSS analysis
  • and much more

 

License

The usage of the Enterprise Version (ad-free) requires the payment of a fee. The Base Version can be used free of charge. With the purchase of the Enterprise Version you not only support the future development of the SGC, but also our contributions to numerous other OpenSource projects.

License Details