# Compiler

> Was der Compiler kann: SASS/SCSS zu CSS kompilieren sowie HTML, JavaScript und CSS minifizieren und beautifien — Einstieg zu Manual, Beispielen und Tipps.

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

## Vier Code-Transformationen unter einer Oberfläche

Der [Compiler](https://www.jpkc.com/tools/compiler/) bündelt vier Aufgaben, die im Frontend-Alltag ständig anfallen und für die man sonst je ein eigenes Tool oder ein Build-Setup bräuchte: **SASS/SCSS zu CSS kompilieren**, sowie **HTML**, **JavaScript** und **CSS** wahlweise **minifizieren** oder **beautifien** (also wieder lesbar einrücken). Alles passiert in vier Tabs — `SASS/SCSS`, `HTML`, `JavaScript`, `CSS` — jeweils mit einem Eingabe- und einem Ausgabe-Editor nebeneinander.

Du fügst deinen Code links ein (oder lädst eine Datei hoch), wählst eine Aktion, und das Ergebnis erscheint rechts — fertig zum Kopieren oder als Datei zum Download. Kein Account, keine Installation, kein Server-Roundtrip: Die eigentliche Verarbeitung läuft komplett in deinem Browser.

Gedacht ist das Tool für alle, die schnell mal etwas umwandeln müssen, ohne dafür eine Toolchain aufzusetzen: **Entwicklerinnen und Entwickler**, die ein SCSS-Snippet aus der Doku gegenprüfen oder eine Handvoll Zeilen JavaScript verkleinern wollen; **Webdesigner**, die fremdes, in einer Zeile zusammengequetschtes CSS erst einmal lesbar machen müssen; und alle, die einen schnellen, nachvollziehbaren Zwischenschritt brauchen, bevor Code in ein Projekt wandert.

## Was die vier Tabs können

Die vier Tabs sind bewusst unterschiedlich ausgestattet — je nachdem, was für die jeweilige Sprache sinnvoll ist:

- **`SASS/SCSS` — Kompilieren.** Wandelt SASS- bzw. SCSS-Quellcode in fertiges CSS um. Eine Option steuert den **Output Style**: `Expanded` (lesbar, eingerückt) oder `Compressed` (minifiziert in einer Zeile). Das ist der einzige Tab, der wirklich *kompiliert* — die anderen drei formatieren oder verkleinern nur.
- **`HTML` — Beautify & Minify.** *Beautify* rückt HTML sauber ein (Optionen: Einrücktiefe, Zeilenumbruch-Länge); *Minify* entfernt Leerraum zwischen Tags und optional die Kommentare.
- **`JavaScript` — Beautify & Minify.** *Beautify* formatiert JavaScript lesbar; *Minify* verkleinert es mit dem etablierten Minifier **Terser** — inklusive Optionen wie Variablennamen kürzen (Mangle) und `console`-Aufrufe entfernen.
- **`CSS` — Beautify & Minify.** *Beautify* rückt CSS ein; *Minify* entfernt Kommentare und Leerraum.

Welche Engine hinter welchem Tab steckt und welche Option genau was bewirkt, steht im [Manual](https://www.jpkc.com/db/tools/compiler/manual/).

## Architektur: alles im Browser

Der Compiler ist ein rein **clientseitiges** Werkzeug. Die Seite selbst liefert nur die Oberfläche aus; sämtliche Umwandlungen rechnet JavaScript direkt in deinem Browser:

- **SASS/SCSS** kompiliert [sass.js](https://github.com/medialize/sass.js/) (englisch), eine zu JavaScript übersetzte Sass-Engine. Das Compiler-Modul ist rund 4 MB groß und wird **erst beim ersten Kompilieren** nachgeladen — ein kurzer Hinweis erscheint dann.
- **Minifizierung von JavaScript** übernimmt [Terser](https://terser.org/) (englisch).
- **Beautify** für HTML, JavaScript und CSS liefert [JS Beautifier](https://beautifier.io/) (englisch).
- **Minify für HTML und CSS** läuft über schlanke, regelbasierte Eigenroutinen (kein vollwertiger Parser) — leichtgewichtig, aber mit Grenzen, die das Manual benennt.
- Ein- und Ausgabe liegen in [ACE-Editoren](https://ace.c9.io/) (englisch) mit Syntax-Hervorhebung; deine Eingabe wird pro Tab automatisch im Browser (LocalStorage) zwischengespeichert.

Weil nichts an einen Server geschickt wird, verlässt dein Code den Rechner nicht — relevant, wenn du nicht-öffentliche Snippets verarbeitest.

## Jetzt ausprobieren

**[→ Compiler öffnen](https://www.jpkc.com/tools/compiler/)** — Code einfügen, Tab wählen, Aktion klicken. Jeder Tab startet mit einem Beispiel-Snippet, an dem du das Verhalten sofort sehen kannst.

## Verwandte JPKCom-Tools

- **[Beautify](https://www.jpkc.com/db/tools/beautify/)** — das dedizierte Formatier-Tool für JavaScript, CSS und HTML, das zusätzlich **deobfuskieren** kann. Wenn dir das reine Einrücken im Compiler nicht reicht, ist Beautify die spezialisierte Adresse.
- **[Playground](https://www.jpkc.com/db/tools/playground/)** — interaktiver HTML/CSS/JavaScript-Editor mit Live-Vorschau, ideal um kompiliertes CSS direkt im Zusammenspiel zu testen.
- **[Source Viewer](https://www.jpkc.com/db/tools/source/)** — Quellcode für über 100 Sprachen ansehen und hervorheben lassen.
- **[Farben-Tools](https://www.jpkc.com/db/tools/colors/)** — Farbwerte erzeugen und umrechnen, die du in dein SCSS oder CSS übernimmst.

---

Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/compiler/manual/)** mit jedem Tab, jeder Engine und jeder Option, praxisnahe **[Beispiele](https://www.jpkc.com/db/tools/compiler/examples/)** und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/compiler/tips/)**.