JPKCom DB

Compiler — Beispiele

Praxisnahe Durchläufe mit dem Compiler: SCSS mit Dart Sass kompilieren, Sass-Module und @debug, JavaScript und HTML minifizieren, fremdes CSS lesbar machen.

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 (@use "sass:color" und "sass:math", Variablen, Mixin, Verschachtelung).
  2. Ersetze das Beispiel durch deinen eigenen SCSS-Code oder lade per Upload file eine .scss- oder .sass-Datei.
  3. Lass Syntax auf Auto-detect und den Output Style auf Expanded (lesbares CSS) und klick auf Compile.
  4. Beim ersten Mal erscheint kurz „Loading Sass compiler..." — das gzip-komprimiert rund 0,9 MB große Modul von Dart Sass 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 styles.css oder, wenn du eine Datei hochgeladen hast, unter deren Namen (aus theme.scss wird theme.css).

Hat dein SCSS einen Syntaxfehler, kompiliert das Tool nicht blind weiter: Es schreibt die Fehlermeldung mit Zeile und Spalte als Kommentar in die Ausgabe, markiert die Zeile im Eingabe-Editor und setzt den Cursor genau dorthin — 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 überflüssigen Leerraum.

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 aus fertigem CSS herauszurechnen. Beim Download heißt die Datei hier übrigens styles.css (bzw. nach deinem Upload), ohne .min — das Kürzel hängt das Tool nur nach dem Minify in den anderen Tabs an. Brauchst du den Namen .min.css, benenne die Datei nach dem Speichern um.

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- oder .mjs-Datei per Upload file).
  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 — das Tool merkt sich die Einstellung für den nächsten Besuch.
  3. Klick auf Minify. Die Verkleinerung übernimmt Terser (öffnet in neuem Tab) (englisch); das Ergebnis erscheint rechts.
  4. Hat dein Code einen Syntaxfehler, steht die Terser-Fehlermeldung als // Error: … in der Ausgabe — korrigier die Stelle und minifiziere erneut.
  5. Download speichert das Ergebnis als script.min.js bzw. — nach einem Upload von app.js — als app.min.js.

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 (öffnet in neuem Tab) (englisch).

Derselbe Ablauf gilt für den HTML- und den JavaScript-Tab. Geht es nur ums Lesbarmachen und steckt der JavaScript-Code in gepackter Form (P.A.C.K.E.R. oder URL-encodiert), ist das spezialisierte Beautify-Tool die bessere Wahl — es entpackt solchen Code vor dem Formatieren. Anderweitig verschleierten Code, etwa mit umbenannten Variablen, entwirrt keines der beiden Tools.

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. Jede Folge aus Leerzeichen und Zeilenumbrüchen schrumpft auf ein Leerzeichen, eingebettete <style>-Blöcke werden mit verkleinert; das Ergebnis steht rechts, die Erfolgsmeldung nennt die Ersparnis in KB und Prozent.
  4. Inhalte von <pre>, <textarea> und <script> übernimmt das Tool unverändert, und bedingte Kommentare (<!--[if …]>) bleiben auch bei Remove comments stehen — die Seite sieht danach aus wie vorher.
  5. Download speichert die Fassung als index.min.html bzw. unter dem Namen deiner hochgeladenen Datei mit .min.

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. Klick in der Ausgabe-Karte auf Use output as input: Die eingerückte Fassung steht jetzt links im Eingabe-Editor, und du bearbeitest sie direkt dort. Gefällt dir das Ergebnis nicht, holt Strg+Z im Eingabe-Editor den vorherigen Stand in einem Schritt zurück.
  3. Für die Auslieferung Minify klicken — fertig ist die kompakte Fassung, die du per Copy oder Download mitnimmst.

So nutzt du beide Richtungen desselben Tabs als Paar: Beautify zum Arbeiten, Minify zum Ausliefern. Derselbe Dreischritt funktioniert im CSS- und im JavaScript-Tab.

Beispiel 7: Moderne Sass-Module und @debug nutzen

Du willst Code mit dem Sass-Modulsystem testen und nebenbei Zwischenwerte prüfen.

  1. Füge im SASS/SCSS-Tab etwa dieses Snippet ein:

    scss
    @use "sass:math";
@use "sass:color";

$base: 16px;
$brand: #0d6efd;

@debug math.div($base, 2);

.card {
    padding: math.div($base, 2);
    border-color: color.adjust($brand, $lightness: -10%);
}

  2. Klick auf Compile. Rechts steht das CSS, die @debug-Ausgabe landet nicht darin, sondern im gelben Kasten unter den Editoren („1 message from Sass:", mit Zeilennummer); die Zeile ist im Eingabe-Editor am Rand markiert.

  3. Meldet Dart Sass dabei Warnungen zu veraltetem Code (Präfix Deprecation:), stehen sie in derselben Liste — so siehst du, welche Stellen du modernisieren solltest.

Dateien aus deinem Projekt kannst du per @use allerdings nicht nachladen; kopiere Partials bei Bedarf mit in den Input-Editor.

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.