# Compiler — Beispiele

> Praxisnahe Durchläufe mit dem Compiler: SCSS zu CSS kompilieren, JavaScript minifizieren, fremdes CSS beautifien und produktionsfertiges CSS in einem Schritt.

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

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/)

Das [Manual](https://www.jpkc.com/db/tools/compiler/manual/) erklärt jeden Tab und jede Option im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe** — typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch; Tab- und Button-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

## Beispiel 1: SCSS zu CSS kompilieren

Der Klassiker — du hast ein SCSS-Snippet und willst sehen, welches CSS dabei herauskommt.

1. Öffne den [Compiler](https://www.jpkc.com/tools/compiler/); der `SASS/SCSS`-Tab ist bereits aktiv und mit einem Beispiel gefüllt (Variablen, Mixin, Verschachtelung).
2. Ersetze das Beispiel durch deinen eigenen SCSS-Code oder lade per **Upload** eine `.scss`-Datei.
3. Lass den **Output Style** auf `Expanded` (lesbares CSS) und klick auf **Compile**.
4. Beim ersten Mal erscheint kurz „Loading SASS compiler…" — das rund 4 MB große Compiler-Modul wird einmalig nachgeladen. Danach steht das fertige CSS rechts im Output-Editor.
5. Hol es dir mit **Copy** in die Zwischenablage oder per **Download** als `output.css`.

Hat dein SCSS einen Syntaxfehler, kompiliert das Tool nicht blind weiter, sondern schreibt eine Fehlermeldung **mit Zeile und Spalte** als Kommentar in die Ausgabe — du siehst sofort, wo es klemmt.

## Beispiel 2: Produktionsfertiges, minifiziertes CSS in einem Schritt

Du willst aus SCSS direkt komprimiertes CSS, ohne hinterher noch durch einen Minify-Schritt zu gehen.

1. Bleib im `SASS/SCSS`-Tab, füge deinen SCSS-Code ein.
2. Stell den **Output Style** auf `Compressed`.
3. **Compile** — die Ausgabe ist jetzt minifiziertes CSS in einer Zeile, ohne Leerraum und Kommentare.

Das spart den Umweg über den `CSS`-Minify-Tab und ist der saubere Weg, wenn dein Stylesheet ohnehin aus SCSS entsteht: Die Engine erzeugt die komprimierte Form selbst, statt sie hinterher per Textregel zusammenzustauchen.

## Beispiel 3: JavaScript minifizieren

Eine Hilfsfunktion oder ein kleines Skript soll für die Produktion verkleinert werden.

1. Wechsle in den `JavaScript`-Tab und füge deinen Code ein (oder lade eine `.js`-Datei per **Upload**).
2. Sieh dir die Minify-Optionen an: **Mangle names** (Standard: an) kürzt lokale Namen; **Drop console** (Standard: aus) entfernt `console.*`-Aufrufe. Für Produktionscode lohnt es sich oft, **Drop console** zusätzlich anzuhaken.
3. Klick auf **Minify**. Die Verkleinerung übernimmt [Terser](https://terser.org/) (englisch); das Ergebnis erscheint rechts.
4. Hat dein Code einen Syntaxfehler, steht die Terser-Fehlermeldung in der Ausgabe — korrigier die Stelle und minifiziere erneut.

Brauchst du umgekehrt **lesbaren** Code (etwa weil du eine eingerückte Version einer kompakten Datei willst), nimm im selben Tab **Beautify** statt Minify.

## Beispiel 4: Fremdes, zusammengequetschtes CSS lesbar machen

Du hast minifiziertes CSS bekommen — alles in einer Zeile — und willst es verstehen.

1. Geh in den `CSS`-Tab und füge das kompakte CSS in den Input-Editor.
2. Wähl bei **Indent Size** deine bevorzugte Einrücktiefe (`2 spaces` oder `4 spaces`).
3. Klick auf **Beautify**. Das CSS erscheint rechts sauber eingerückt, mit Zeilenumbrüchen und einer Deklaration pro Zeile — über den [JS Beautifier](https://beautifier.io/) (englisch).

Derselbe Ablauf gilt für den `HTML`- und den `JavaScript`-Tab. Geht es nur ums Lesbarmachen *und* du hast es mit absichtlich verschleiertem (obfuskiertem) Code zu tun, ist das spezialisierte **[Beautify](https://www.jpkc.com/db/tools/beautify/)**-Tool die bessere Wahl — es kann zusätzlich deobfuskieren.

## Beispiel 5: HTML für die Auslieferung verkleinern

Ein HTML-Fragment soll für die Produktion kompakter werden.

1. Wechsle in den `HTML`-Tab und füge dein Markup ein.
2. Willst du auch die Kommentare loswerden, hak **Remove comments** an (diese Option wirkt nur beim Minify).
3. Klick auf **Minify**. Leerraum zwischen Tags und mehrfacher Whitespace werden entfernt, das Ergebnis steht rechts.
4. **Achtung bei whitespace-empfindlichen Bereichen:** Enthält dein HTML `<pre>` oder `<textarea>`, prüf das Ergebnis — die regelbasierte Minify-Routine kann dort Leerraum verändern.

## Beispiel 6: Vom kompakten zum eingerückten HTML und zurück

Du jonglierst zwischen lesbarer Bearbeitung und kompakter Auslieferung.

1. Im `HTML`-Tab kompaktes Markup einfügen und **Beautify** klicken — wähl vorher **Indent Size** und **Wrap Length** (z. B. `120`). Das Ergebnis ist sauber eingerückt und liest sich angenehm.
2. Übernimm die Ausgabe per **Copy**, bearbeite sie woanders.
3. Für die Auslieferung dasselbe Markup wieder einfügen und **Minify** klicken — fertig ist die kompakte Fassung.

So nutzt du beide Richtungen desselben Tabs als Paar: Beautify zum Arbeiten, Minify zum Ausliefern.

---

Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/compiler/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/compiler/manual/) für jede Engine und Option im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/compiler/tips/) für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/compiler/).