Ich arbeite in fast allen Projekten nach demselben Muster: Die Quellen
liegen in einem files4u/-Ordner, und beim Speichern soll
daraus automatisch eine minifizierte Fassung in einen assets/-Ordner
wandern. Klingt simpel – war in VS Code aber ein Dauerärgernis.
Zwei Erweiterungen haben den Job bei mir bisher geteilt: MinifyAll fürs Minifizieren von JavaScript und CSS, der Live Sass Compiler fürs Kompilieren von SCSS. Beide für sich okay – aber keine der beiden hat das gemacht, was ich eigentlich wollte. Also habe ich mir mein eigenes Werkzeug geschrieben, das beide ersetzt: Minify4U.
🎯 Endlich ein frei wählbarer Ausgabeordner
Das war der Auslöser. MinifyAll konnte keinen Ausgabeordner angeben –
es legte die .min.js stur neben die Quelldatei ab, statt sie
dorthin zu schreiben, wo sie hingehört. Ergebnis: Auf der Live-Seite lief am Ende
ein veralteter Stand, weil das eingebundene File woanders lag als das frisch
minifizierte. Bei Minify4U lege ich pro Dateityp einen Zielordner
fest – und das Speichern schreibt genau dorthin. Genau das 4u-Build-Muster,
automatisiert.
🧩 Ein Tool für alle Formate
Statt zweier Erweiterungen kümmert sich jetzt eine um alles. Minify4U erkennt den Dateityp und wählt automatisch das passende Werkzeug und die richtige Endung:
- JavaScript → terser →
.min.js - CSS → clean-css →
.min.css - SCSS / Sass → Dart Sass (kompiliert und minifiziert) →
.min.css - LESS → less + clean-css →
.min.css - HTML → html-minifier-terser →
.min.html - JSON → kompakt geschrieben →
.min.json
Der Sass-Teil ist dabei der Grund, warum ich auch den separaten Compiler nicht mehr brauche: SCSS wird in einem Rutsch kompiliert und minifiziert.
🛡️ Kein .min.min.js mehr
Ein Detail, das mich vorher regelmäßig genervt hat: Bereits minifizierte Dateien
wurden einfach nochmal durch die Mangel gedreht – aus app.min.js
wurde app.min.min.js, und fertige Vendor-Bibliotheken wurden beim
bloßen Öffnen + Speichern verändert. Minify4U hat einen
eingebauten Schutz: Was schon minifiziert ist (oder auf
.min endet), wird erkannt und übersprungen – mit einer klaren
Meldung im Ausgabe-Log.
⚙️ Pro Projekt konfigurierbar
Ich arbeite oft mit Multi-Root-Workspaces – mehrere Projekte in einem Fenster, jedes mit eigener Ordnerstruktur. Deshalb liest Minify4U seine Einstellungen pro Datei: Jedes Projekt kann denselben Dateityp in einen anderen Ordner schreiben. Für den Normalfall gibt es je Sprache eine einfache Einstellung (nur der Zielordner), für Sonderfälle ein Regel-System mit eigenem Pfad, Suffix und Minifier. Spezifischer schlägt allgemeiner – wie man es erwartet.
🔧 Nichts neu erfunden
Ein Grundsatz war mir wichtig: keinen eigenen Minifier basteln. Minify4U wrappt die bewährten, seit Jahren erprobten Standard-Tools der Web-Welt – terser, clean-css, Dart Sass und Co. Das heißt weniger eigener Code, weniger eigene Bugs und Ergebnisse, denen man vertrauen kann.
Fazit
Aus einem konkreten Ă„rgernis – „warum kann ich nicht einfach den Ausgabeordner festlegen?“ – ist ein kleines, aufgeräumtes Werkzeug geworden, das gleich zwei Erweiterungen aus meinem Workflow ersetzt. Ein Speichern, richtiger Output, am richtigen Ort. 🚀
Minify4U ist Open Source (MIT) und kostenlos. Du findest es im VS Code Marketplace und den Quellcode auf GitHub.
Fragen, Wünsche oder ein Bug entdeckt? Melde dich gerne – einfach Kontakt aufnehmen.