# Compiler — Manual

> Vollständige Funktionsbeschreibung des Compilers: alle vier Tabs, die Engines (sass.js, Terser, JS Beautifier), jede Option und ihre Grenzen.

Source: https://www.jpkc.com/db/tools/compiler/manual/

Zurück zur Übersicht: [Compiler](https://www.jpkc.com/db/tools/compiler/) · Tool live öffnen: [www.jpkc.com/tools/compiler/](https://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](https://ace.c9.io/) (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](https://github.com/medialize/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](https://beautifier.io/) (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](https://beautifier.io/) (englisch), mit zusammenhängendem Klammerstil (`brace_style: collapse`).

### Minify

Verkleinert JavaScript mit [Terser](https://terser.org/) (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](https://beautifier.io/) (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](https://www.jpkc.com/db/tools/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](https://www.jpkc.com/db/tools/compiler/). Konkrete Abläufe stehen in den [Beispielen](https://www.jpkc.com/db/tools/compiler/examples/), Strategie und Stolperfallen in den [Tipps & Tricks](https://www.jpkc.com/db/tools/compiler/tips/).