The command line interface: SGC – Command Line Task Runner
The SGC is a command line interface and represents a central point through which all development-related tasks can be executed. Already integrated is a build process based on Node.js 14, which takes care of tasks like optimizing images, compiling Sass and ES2022 JavaScript code, linting and much more. To integrate tasks that go beyond the built-in tooling, the program can be extended with custom commands using shell or Node.js scripts. The SGC focuses on TYPO3 projects - but with some settings in the configuration file, the tool can also be used in other systems. Since version 3 the SGC can be used as a standalone tool to work with e.g. static HTML files. This feature is especially useful for rapid prototyping.
Features
- Easy to install
- Styles / SCSS
- JS / SCSS Linting
- JavaScript (ES2022 Syntax + Module)
- Live Reload
- Compression of JS and CSS files
- SizeGuard controls JS and CSS bundle size
- "Above the Fold" configuration
- Image Optimization
- Expandability
- Support of Open Source Projects
- Prettier Code Formatter
- Incremental adding of TypeScript by using TS instead of JS files
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.
Highlights
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
The SGC supports a workflow that focuses on writing modular JavaScript. The features of the brand new ES2022 specification can be used. The common browsers (Chrome, Safari, Firefox, Edge) are supported – Internet Explorer 11, however, is no longer supported. You simply specify which browsers you want to support in the configuration file.
Styles / SCSS
The SGC compiles Sass files into CSS and automatically adds vendor prefixes. The inline SVG engine automatically binds SVG icons as background-image. The image-dimensions plugin allows using image-width and image-height functions in CSS. The SGC also includes a built-in solution for generating inline CSS (useful for including abovethefold-styles). CSS files are minified.
Linting
A code base should be as if it were written by one developer. To achieve this, the code must meet certain formal requirements: Constant comment style, consistent indentation, and use/unuse of certain constructs make a code base appear coherent and facilitate reading and refactoring. By checking formal criteria, "code smells" can be avoided, such as setting a transition on a CSS property that does not animate performantly.
SGC integrates ESLint and Stylelint, two pointers that sass and check JavaScript code against predefined rules. Deviations are pointed out during writing. You can define the rules yourself according to your CGL or 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.
Contact us
Our products have convinced you and you would like to realize your next web project or your individual software idea together with us? – Then get in touch for a non-binding offer!