JPKCom DB

Compiler — Manual

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

Zurück zur Übersicht: Compiler · Tool live öffnen: 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-Karte mit den Einstellungen und den Aktions-Buttons. Beide Editoren sind ACE-Editoren (öffnet in neuem Tab) (englisch) im dunklen Dracula-Theme mit Syntax-Hervorhebung in der jeweiligen Sprache (die Ausgabe des SASS/SCSS-Tabs als CSS); lange Zeilen brechen um, die Tab-Taste rückt im Eingabe-Editor mit zwei Leerzeichen ein.

Jeder Tab bringt dieselben Hilfsfunktionen mit — die Buttons zeigen nur ein Icon, ihr Name erscheint als Tooltip:

  • Upload file (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. Steht im Editor eigener Code (nicht das Beispiel), fragt das Tool vorher nach („Clear the input?"); im Eingabe-Editor holt Strg+Z den Inhalt auch danach zurück.
  • Use output as input (Ausgabe-Karte) — übernimmt die Ausgabe als neue Eingabe, etwa um beautifiten Code zu bearbeiten und danach zu minifizieren. Die Übernahme ist ein einzelner Undo-Schritt: Strg+Z im Eingabe-Editor stellt den vorherigen Stand wieder her.
  • Copy (Ausgabe-Karte) — kopiert die Ausgabe in die Zwischenablage.
  • Download (Ausgabe-Karte) — speichert die Ausgabe als Datei. Der Name richtet sich nach der zuletzt hochgeladenen Datei (aus theme.scss wird theme.css), ohne Upload gelten styles (SCSS, CSS), index (HTML) und script (JavaScript). War die letzte Aktion ein Minify, hängt das Tool .min an (theme.min.css). Die Endung folgt dem Tab: .css, .html, .js, .css. Den Namen aus dem Upload merkt sich das Tool nur bis zum Neuladen der Seite.

Automatisches Zwischenspeichern: Was du in einen Input-Editor schreibst, wird etwa eine Sekunde nach der letzten Eingabe pro Tab im Browser (LocalStorage) gesichert und beim nächsten Besuch wiederhergestellt; die Ausgabe wird nicht gespeichert. Ebenso merkt sich das Tool die Optionen aller Tabs. Jeder Tab startet beim ersten Aufruf — und nach einem Clear beim nächsten Laden — mit einem Beispiel-Snippet, an dem du das Verhalten sofort durchspielen kannst. Strg+Z direkt nach dem Laden leert den Editor nicht: Der wiederhergestellte Stand zählt nicht als Änderung.

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, keine API und keinen Verlauf auf dem Server — dein Code verlässt den Rechner nicht. Nachgeladen werden nur Skripte von derselben Domain wie das Tool: das Sass-Compiler-Modul (siehe unten) beim ersten Compile sowie Sprachmodi, Farbschema und Syntax-Worker des Editors.

Die eingesetzten Bibliotheken: Dart Sass (öffnet in neuem Tab) (englisch) für SCSS/Sass, Terser (öffnet in neuem Tab) (englisch) für JS-Minify, JS Beautifier (öffnet in neuem Tab) (englisch) für alle drei Beautify-Aktionen und ACE (öffnet in neuem Tab) (englisch) als Editor. HTML- und CSS-Minify sind eigene Routinen des Tools.

Der SASS/SCSS-Tab — Kompilieren

Dieser Tab wandelt SCSS, Sass in eingerückter Syntax oder reines CSS in CSS um. Er ist der einzige Tab, der tatsächlich kompiliert; die anderen drei formatieren oder verkleinern nur.

Engine: Dart Sass (lazy geladen)

Kompiliert wird mit Dart Sass (öffnet in neuem Tab) (englisch) in der reinen JavaScript-Fassung (npm-Paket sass, Version 1.105.1). Damit funktioniert das aktuelle Sass-Modulsystem: @use mit den eingebauten Modulen wie sass:math und sass:color, math.div() für Divisionen und Farbfunktionen wie color.adjust() — das Beispiel-Snippet zeigt genau das. Das Compiler-Modul ist gzip-komprimiert rund 0,9 MB groß (ungepackt knapp 6 MB in drei Dateien) und wird deshalb erst beim ersten Klick auf Compile nachgeladen — währenddessen erscheint der Hinweis „Loading Sass compiler...". Ab dann ist die Engine für die restliche Sitzung geladen. Scheitert das Nachladen (etwa ohne Netz), meldet das Tool „Failed to load the Sass compiler." und versucht es beim nächsten Klick erneut.

Option: Syntax

Ein Auswahlfeld legt fest, wie Dart Sass die Eingabe liest:

  • Auto-detect (Standard) — das Tool entscheidet selbst: Stehen außerhalb von Strings und Kommentaren geschweifte Klammern { } oder Semikola ; im Code, gilt er als SCSS (reines CSS ist gültiges SCSS), sonst als eingerückte Sass-Syntax.
  • SCSS — die geschweifte Syntax mit { } und ;.
  • Indented (.sass) — die eingerückte Syntax ohne Klammern und Semikola, wie in .sass-Dateien.
  • Plain CSS — die Eingabe wird als reines CSS ohne Sass-Erweiterungen gelesen.

Lädst du eine Datei hoch, deren Endung nicht zur fest gewählten Syntax passt (etwa eine .sass-Datei bei SCSS oder eine .scss-Datei bei Indented (.sass)), schaltet das Tool die Auswahl auf Auto-detect und sagt das in der Erfolgsmeldung („syntax switched to Auto-detect"). Passt die gewählte Syntax nicht zum Code und schlägt die Kompilierung deshalb fehl, weist die Fehlermeldung darauf hin und schlägt Auto-detect vor. Ausnahme Plain CSS: Hier gelten .css- und .scss-Dateien sowie SCSS-artiger Code als passend — das Tool schaltet nicht um und gibt keinen Hinweis, obwohl Sass-Variablen, Mixins, //-Kommentare und Modul-Aufrufe wie math.div() unter Plain CSS mit einem Fehler abbrechen (eine @use-Zeile selbst landet dagegen ohne Fehler unverändert im CSS). Wähl dann von Hand Auto-detect oder SCSS.

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, und die Meldung „SCSS compiled successfully." erscheint.

Warnungen und @debug: Was Dart Sass während des Kompilierens meldet — Warnungen, Hinweise auf veraltete Funktionen (Präfix Deprecation:) und Ausgaben von @debug (Präfix @debug:) —, landet nicht im CSS, sondern in einem gelben Kasten unter den Editoren („1 message from Sass:" bzw. „N messages from Sass:"), jeweils mit Zeilennummer, sofern Dart Sass eine Position mitliefert. Diese Zeilen sind zusätzlich im Eingabe-Editor am Rand markiert, und statt der Erfolgsmeldung erscheint ein Warnhinweis: „Compiled with 1 warning." bzw. „Compiled with N warnings.".

Fehler: Schlägt die Kompilierung fehl, schreibt das Tool /* Compilation Error */ samt Dart-Sass-Meldung und Position („Line X, column Y") als CSS-Kommentar in die Ausgabe, markiert die Zeile im Eingabe-Editor als Fehler und setzt den Cursor direkt an die Stelle. Eine Fehlermeldung nennt Zeile und Grund — und, falls die fest gewählte Syntax nicht zum Code passt, den Hinweis auf Auto-detect (bei Plain CSS mit SCSS-Code fehlt er, siehe oben).

Grenzen

Eigene Dateien lassen sich per @use oder @import nicht einbinden: Das Tool hat keinen Zugriff auf ein Dateisystem, der gesamte Quellcode muss im Input-Editor stehen. Die eingebauten Module (sass:math, sass:color usw.) funktionieren dagegen. Weil Dart Sass rechnet, wie es die aktuelle Sass-Version vorsieht, kann älterer Code, der für LibSass oder ältere Sass-Versionen geschrieben wurde, Deprecation-Warnungen auslösen oder Farben in anderer Schreibweise ausgeben als früher.

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 (Standard: aus), die nur beim Minify wirkt: Ist sie gesetzt, werden HTML-Kommentare (<!-- … -->) aus der Ausgabe entfernt. Bedingte Kommentare (<!--[if …]> und ihre Gegenstücke) bleiben stehen, weil sie eine Funktion haben.

Beautify

Rückt das HTML sauber ein — über den JS Beautifier (öffnet in neuem Tab) (englisch). Der Inhalt von <head> und <body> wird mit eingerückt, bestehende Leerzeilen bleiben erhalten (höchstens zwei am Stück). Inhalte in <code> und <pre> bleiben unangetastet, damit ihr Whitespace erhalten bleibt.

Minify

Verkleinert das HTML über eine eigene Routine, die die Darstellung nicht verändert:

  • Leerraum — jede Folge aus Leerzeichen, Tabs und Zeilenumbrüchen wird zu einem Leerzeichen zusammengefasst, aber nie ganz entfernt. Ein Leerzeichen zwischen Inline-Elementen (<b>a</b> <i>b</i>) ist sichtbarer Text; fiele es weg, rückten die Wörter zusammen.
  • <pre>, <textarea> und <script> bleiben Zeichen für Zeichen erhalten — dort zählt jeder Umbruch, und ein zusammengezogenes Skript würde hinter einem //-Kommentar verschwinden.
  • <style>-Blöcke laufen durch den CSS-Minifier des CSS-Tabs (siehe unten). Dabei fallen CSS-Kommentare weg, /*! … */-Kommentare bleiben.
  • Kommentare entfernt das Minify nur bei gesetztem Remove comments.

Die Erfolgsmeldung nennt die Ersparnis, etwa „HTML minified (1.2 KB → 0.9 KB, −25 %)".

Grenzen

Weil Leerraum nur zusammengefasst, nicht entfernt wird, fällt die Ersparnis bei stark eingerücktem HTML kleiner aus als bei aggressiveren Minifiern — das ist der Preis dafür, dass die Seite danach genauso aussieht wie vorher. Elemente mit white-space: pre per CSS (statt <pre>) erkennt die Routine nicht; deren Leerraum wird wie überall zusammengefasst.

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 — mehrere hintereinander schrumpfen auf eine. Ohne Haken entfernt Beautify alle Leerzeilen.

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 (öffnet in neuem Tab) (englisch), mit zusammenhängendem Klammerstil (brace_style: collapse) und einem Leerzeichen nach anonymem function (function ()). Weitere Formatier-Optionen wie Klammerstil oder Comma-first bietet das Beautify-Tool.

Minify

Verkleinert JavaScript mit Terser (öffnet in neuem Tab) (englisch), dem De-facto-Standard-Minifier. Die Verarbeitung läuft asynchron; bei einem Syntaxfehler im Eingabe-Code schreibt das Tool die Fehlermeldung als // Error: … in die Ausgabe und meldet sie zusätzlich. 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. Zwei Optionen, zwei Aktionen.

Option: Indent Size

Einrücktiefe für Beautify: 2 spaces oder 4 spaces (Standard: 4).

Option: Remove comments (minify)

Checkbox für Minify (Standard: an): Entfernt CSS-Kommentare (/* … */). Nimmst du den Haken heraus, bleiben alle Kommentare im Ergebnis stehen. Kommentare der Form /*! … */ — die übliche Schreibweise für Lizenz- und Copyright-Hinweise — bleiben in jedem Fall erhalten.

Beautify

Rückt CSS lesbar ein — über den JS Beautifier (öffnet in neuem Tab) (englisch).

Minify

Verkleinert CSS über eine eigene Routine, die die Bedeutung nicht verändert:

  • Strings ("…", '…') bleiben unverändert — content: "a : b" behält seine Leerzeichen. Einzige Ausnahme: Die Zeichenfolge ;} kürzt der letzte Schritt überall zu }, auch in Strings und in erhaltenen Kommentaren.
  • Leerraum wird zusammengefasst und nur dort ganz entfernt, wo er nichts bedeutet: um {, }, ;, ,, > und ~. Um + bleibt er stehen, weil calc() ihn braucht, und um : in Selektoren ebenfalls, denn div :first-child (Nachfahre) ist etwas anderes als div:first-child.
  • Deklarationen werden gestrafft: color : red; wird zu color:red;, das letzte Semikolon vor } entfällt. Enthält der Wert einen String (content : "…", font-family : "Segoe UI"), bleiben die Leerzeichen um : stehen.
  • Kommentare fallen weg, solange Remove comments (minify) gesetzt ist; /*! … */ bleibt immer.

Die Erfolgsmeldung nennt die Ersparnis, etwa „CSS minified (2.1 KB → 1.5 KB, −29 %)".

Grenzen

Das Minify kürzt keine Werte (aus #ffffff wird nicht #fff, aus 0px nicht 0) und fasst keine Regeln zusammen — es entfernt nur Leerraum und Kommentare. 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-Tool. Die Funktionen überschneiden sich also bewusst; die Hinweistexte in den Tabs HTML, JavaScript und CSS verlinken auf Beautify. Der Unterschied: Beautify ist auf das Formatieren spezialisiert, bietet sämtliche Optionen des JS Beautifier und kann zusätzlich P.A.C.K.E.R.-gepackten und URL-encodierten JavaScript-Code entpacken (Option Detect packers) — das bietet der Compiler nicht. Umgekehrt kann nur der Compiler minifizieren und SCSS kompilieren. Geht es dir nur ums saubere Einrücken im Rahmen einer Compile-/Minify-Aufgabe, bleib hier; brauchst du Entpacken oder feinere Formatier-Kontrolle, ist Beautify die richtige Adresse.

Betriebsfakten — kompakt

  • Clientseitig: Alle Umwandlungen laufen im Browser; kein Server-Upload deines Codes, keine API, kein Verlauf.
  • Lazy Sass: Das Modul von Dart Sass (gzip-komprimiert ~0,9 MB) lädt erst beim ersten Compile (einmal pro Sitzung).
  • Engines: SCSS/Sass → Dart Sass 1.105.1; JS-Minify → Terser; HTML/JS/CSS-Beautify → JS Beautifier; HTML-/CSS-Minify → eigene, darstellungssichere Routinen.
  • SCSS-Optionen: Syntax Auto-detect/SCSS/Indented (.sass)/Plain CSS, Output Style Expanded/Compressed; Warnungen und @debug als Liste unter den Editoren.
  • Persistenz: Eingaben pro Tab und die Optionen aller Tabs werden im LocalStorage gesichert und wiederhergestellt.
  • Ein-/Ausgabe: Upload (gefilterte Endungen), Use output as input, Copy, Download unter dem Upload-Namen bzw. styles/index/script (nach Minify mit .min), Clear mit Rückfrage pro Tab.

Für den Einstieg und das große Bild siehe die Übersichtsseite. Konkrete Abläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks.