Compiler — Manual

Zurück zur Übersicht: Compiler · Tool live öffnen: www.jpkc.com/tools/compiler/

Dieses Manual beschreibt den Compiler vollständig: den Aufbau der Oberfläche, jeden der vier Tabs mit seinen Aktionen und Optionen, die jeweils genutzte Engine und die Grenzen jedes Modus. Die Oberfläche des Tools ist auf Englisch — Tab-, Button- und Options-Bezeichnungen stehen deshalb in ihrer englischen Original-Schreibweise, jeweils mit deutscher Erläuterung.

Aufbau und gemeinsame Bedienelemente

Das Tool besteht aus vier Tabs: SASS/SCSS, HTML, JavaScript und CSS. Jeder Tab ist gleich aufgebaut — links ein Input-Editor, rechts ein Output-Editor (schreibgeschützt), darunter eine Options-Leiste mit den Aktions-Buttons. Beide Editoren sind ACE-Editoren (englisch) mit Syntax-Hervorhebung in der jeweiligen Sprache.

Jeder Tab bringt dieselben Hilfsfunktionen mit:

• Upload (Eingabe-Karte) — lädt eine Datei in den Input-Editor. Die akzeptierten Endungen sind pro Tab passend gefiltert (.scss/.sass/.css, .html/.htm, .js/.mjs, .css).
• Clear (Eingabe-Karte) — leert Ein- und Ausgabe und löscht den zwischengespeicherten Stand dieses Tabs.
• Copy (Ausgabe-Karte) — kopiert die Ausgabe in die Zwischenablage.
• Download (Ausgabe-Karte) — lädt die Ausgabe als Datei (output.<ext> mit der zum Tab passenden Endung).

Automatisches Zwischenspeichern: Was du in einen Input-Editor schreibst, wird kurz nach der letzten Eingabe pro Tab im Browser (LocalStorage) gesichert und beim nächsten Besuch wiederhergestellt. Jeder Tab startet beim ersten Aufruf mit einem Beispiel-Snippet, an dem du das Verhalten sofort durchspielen kannst.

Architektur

Der Compiler arbeitet vollständig clientseitig. Die Seite liefert nur die Oberfläche; alle Umwandlungen rechnet JavaScript in deinem Browser. Es gibt keinen Server-Roundtrip und keine Verarbeitung im Hintergrund — dein Code verlässt den Rechner nicht. Die einzige Ausnahme ist ein einmaliger Skript-Download: das SASS-Compiler-Modul (siehe unten).

Der SASS/SCSS-Tab — Kompilieren

Dieser Tab wandelt SASS/SCSS-Quellcode in CSS um. Er ist der einzige Tab, der tatsächlich kompiliert; die anderen drei formatieren oder verkleinern nur.

Engine: sass.js (lazy geladen)

Kompiliert wird mit sass.js (englisch), einer nach JavaScript übersetzten Sass-Engine, die im Browser läuft. Das Compiler-Modul ist mit rund 4 MB vergleichsweise groß und wird deshalb erst beim ersten Klick auf Compile nachgeladen — währenddessen erscheint ein Hinweis („Loading SASS compiler…"), danach eine Erfolgsmeldung. Ab dann ist die Engine für die restliche Sitzung geladen.

Option: Output Style

Ein Auswahlfeld steuert das Format der CSS-Ausgabe:

• Expanded (Standard) — lesbares CSS mit Einrückung und Zeilenumbrüchen, eine Deklaration pro Zeile.
• Compressed — minifiziertes CSS, alles in einer Zeile, ohne überflüssigen Leerraum. Praktisch, wenn du direkt produktionsfertiges CSS willst, ohne hinterher noch durch den CSS-Minify-Tab zu gehen.

Compile

Der Button Compile startet die Umwandlung. Ist die Engine noch nicht geladen, wird sie zuerst nachgezogen. Bei Erfolg steht das CSS rechts im Output-Editor. Schlägt die Kompilierung fehl (Syntaxfehler), schreibt das Tool eine Fehlermeldung mit Zeile und Spalte als CSS-Kommentar in die Ausgabe und meldet den Fehler zusätzlich als Hinweis — du siehst also direkt, wo es klemmt.

Grenzen

sass.js basiert auf LibSass, nicht auf dem heutigen Dart Sass. Klassische Sass-Funktionen — Variablen, Verschachtelung, Mixins (@mixin/@include), @import, Funktionen wie lighten() — funktionieren zuverlässig. Die neueren Dart-Sass-Modulfeatures (@use, @forward, das sass:-Modulsystem) gehören nicht zum LibSass-Funktionsumfang; arbeite hier mit klassischer @import-Syntax. Externe @import-Dateien lassen sich ohnehin nicht auflösen — es gibt kein Dateisystem, der gesamte Quellcode muss im Input-Editor stehen.

Der HTML-Tab — Beautify & Minify

Formatiert oder verkleinert HTML. Zwei Aktionen, drei Optionen.

Option: Indent Size

Einrücktiefe für Beautify: 2 spaces oder 4 spaces (Standard: 4). Eingerückt wird mit Leerzeichen.

Option: Wrap Length

Maximale Zeilenlänge für Beautify: No wrap (0), 80 oder 120 (Standard). Steuert, ab welcher Breite lange Zeilen umbrochen werden.

Option: Remove comments

Eine Checkbox, die nur beim Minify wirkt: Ist sie gesetzt, werden HTML-Kommentare (<!-- … -->) aus der Ausgabe entfernt.

Beautify

Rückt das HTML sauber ein — über den JS Beautifier (englisch). Inhalte in <code> und <pre> bleiben dabei unangetastet, damit ihr Whitespace erhalten bleibt.

Minify

Verkleinert das HTML über eine regelbasierte Eigenroutine (kein vollständiger HTML-Parser): Leerraum zwischen Tags wird entfernt, mehrfacher Leerraum auf ein Zeichen reduziert, Zeilen getrimmt und Leerzeilen entfernt. Optional (siehe Remove comments) fliegen auch die Kommentare raus.

Grenzen

Weil das Minify rein regelbasiert arbeitet, kann es bei whitespace-empfindlichen Bereichen wie <pre>, <textarea> oder white-space: pre ungewollt Leerraum verändern. Für solche Fälle Minify gezielt einsetzen oder den betroffenen Bereich ausnehmen.

Der JavaScript-Tab — Beautify & Minify

Formatiert oder verkleinert JavaScript. Beautify und Minify nutzen unterschiedliche Engines und haben deshalb eigene Optionen.

Option: Indent Size

Einrücktiefe für Beautify: 2 spaces oder 4 spaces (Standard: 4).

Option: Preserve newlines

Checkbox für Beautify (Standard: an): Bestehende Leerzeilen im Quellcode bleiben erhalten (bis zu zwei am Stück), statt komplett zusammengezogen zu werden.

Option: Drop console

Checkbox für Minify (Standard: aus): Entfernt console.*-Aufrufe aus dem Ergebnis — nützlich, um Debug-Ausgaben aus Produktionscode zu tilgen.

Option: Mangle names

Checkbox für Minify (Standard: an): Kürzt lokale Variablen- und Funktionsnamen, was die Datei zusätzlich verkleinert.

Beautify

Formatiert JavaScript lesbar — über den JS Beautifier (englisch), mit zusammenhängendem Klammerstil (brace_style: collapse).

Minify

Verkleinert JavaScript mit Terser (englisch), dem De-facto-Standard-Minifier. Die Verarbeitung läuft asynchron; bei einem Syntaxfehler im Eingabe-Code schreibt das Tool die Fehlermeldung in die Ausgabe und meldet sie als Hinweis. Terser versteht modernes JavaScript (ES2015+).

Grenzen

Mangle names kürzt nur sicher umbenennbare lokale Namen — globale APIs und exportierte Namen bleiben unverändert. Drop console entfernt console-Aufrufe; verlässt sich dein Code an anderer Stelle auf deren Rückgabewert (selten), beachte das.

Der CSS-Tab — Beautify & Minify

Formatiert oder verkleinert CSS. Eine Option, zwei Aktionen.

Option: Indent Size

Einrücktiefe für Beautify: 2 spaces oder 4 spaces (Standard: 4).

Beautify

Rückt CSS lesbar ein — über den JS Beautifier (englisch).

Minify

Verkleinert CSS über eine regelbasierte Eigenroutine: entfernt Kommentare (/* … */), Leerraum um Selektoren, Klammern, Semikola, Doppelpunkte und Kommata, streicht das letzte Semikolon vor } und zieht alles in eine Zeile. Anders als beim HTML-Minify gibt es hier keine Option zum Erhalten von Kommentaren — sie werden immer entfernt.

Grenzen

Auch dieses Minify ist regelbasiert und kein vollwertiger CSS-Parser. Bei exotischen Konstrukten (komplexe calc()-Ausdrücke mit Leerzeichen-Semantik, Inhalte in content: "…", manche @-Regeln) kann das Ergebnis ungewollt verändert werden. Für robustes CSS reicht es; bei Spezialfällen das Ergebnis gegenprüfen. Wer SCSS in einem Schritt minifiziert haben will, nutzt im SASS/SCSS-Tab besser den Output Style Compressed.

Abgrenzung zum Beautify-Tool

Der Compiler kann HTML, JavaScript und CSS beautifien — dafür nutzt er dieselbe Bibliothek wie das eigenständige Beautify-Tool. Die Funktionen überschneiden sich also bewusst. Der Unterschied: Beautify ist auf das Formatieren spezialisiert und kann zusätzlich deobfuskieren — Letzteres bietet der Compiler nicht. Geht es dir nur ums saubere Einrücken im Rahmen einer Compile-/Minify-Aufgabe, bleib hier; brauchst du Deobfuskierung oder feinere Formatier-Kontrolle, ist Beautify die richtige Adresse.

Betriebsfakten — kompakt

• Clientseitig: Alle Umwandlungen laufen im Browser; kein Server-Upload deines Codes.
• Lazy SASS: Das ~4-MB-Compiler-Modul lädt erst beim ersten Compile (einmal pro Sitzung).
• Engines: SASS/SCSS → sass.js (LibSass); JS-Minify → Terser; HTML/JS/CSS-Beautify → JS Beautifier; HTML-/CSS-Minify → regelbasierte Eigenroutinen.
• Persistenz: Eingaben werden pro Tab im LocalStorage gesichert und wiederhergestellt.
• Ein-/Ausgabe: Upload (gefilterte Endungen), Copy, Download als output.<ext>, Clear pro Tab.

Für den Einstieg und das große Bild siehe die Übersichtsseite. Konkrete Abläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks.