JPKCom DB

Compiler — Beispiele

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

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

Das 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; 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 (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 (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-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 zum großen Bild, das Manual für jede Engine und Option im Detail und die Tipps & Tricks für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.