LESS is more – LESS, CSS und Javascript-Dateien zusammenführen und komprimieren

Heute möchte ich Ihnen mein LESS/CSS/JS minify-Plugin vorstellen. Welches LESS-Dateien konvertiert und CSS/Javascript-Dateien zusammenführt. CSS-Dateien von heute können sehr großes Ausmaß erlangen. Vor allem CSS3-Features, welche für verschiedene Browserengines eigene Seleketoren benötigen, lassen schnell den Überblick über die erstellten CSS-Dateien verlieren. Um Herr dieses Umstandes zu werden ist die Benutzung der dynamischen Stylesheet Sprache LESS sehr von Vorteil.

Beispielsweise können wir mit LESS Variablen deklarieren um diese Überall einzubinden. In Verbindung mit Funktionen (sogenannte Mixins), welche man in der LESS-Datei deklariert, ist es auch möglich komplexe Styles auszulagern. Das Beispiel auf der LESS-Seite verdeutlicht das sehr gut: LESS-Datei:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
   // Definierte Funktion/CSS-Klasse wird 
   // hier einfach eingebunden und aufgerufen
  .rounded-corners;
}

#footer {
   // Es ist auch möglich den Standardwert (5px)
   // durch einen eigenen Wert zu ersetzen
  .rounded-corners(10px);
}

Generierte CSS-Datei:

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Um eine CSS-Datei aus einer LESS-Datei zu erzeugen, benötigt es einen Compiler. Für Windows gibt es ein automatisches Tool Namens WinLess , welches automatisch die CSS-Datei aktualisiert, wenn die LESS-Datei sich ändert.

Wenn man aber nicht immer im Hintergrund ein Programm laufen lassen möchte oder auf einer Linux-Umgebung arbeitet, kann man auch auf PHP-basierte Tools setzen. Dies ist zum Beispiels das Tool lessphp.

Wir haben natürlich modular gearbeitet und so sind viele kleine CSS-Dateien entstanden. Um die Geschwindigkeit der Seite zu verbessern, können wir die Dateien auch gleich noch zusammenfassen. Durch das Zusammenfassen der Dateien werden unnötig viele HTTP-Requests (Jede Datei wird einzeln abgefragt) vermieden.
Wir haben nun eine große CSS-Datei welche alle unsere kleinen CSS-Dateien zusammenfasst. Es wäre von Vorteil wenn die Inhalte in der CSS-Datei noch unnötige Leerzeichen und menschenlesbare Formatierungen (Beispiel: margin: 10px 0 10px;) minimiert werden.
Mit dem Tool minify werden nicht benötige Formatieren, Leerzeichen, Umbrüche und Weiteres in der CSS-Datei bereinigt.

Mit meinem Contao-Plugin “minify_less_css_js” wird dies alles auf einmal gemacht. Es konvertiert LESS-Dateien zu CSS-Dateien und führt sie zu einer großen CSS-Datei zusammen. Javascript-Dateien können damit auch zusammengefasst.

Sie können sich das Plugin einfach downloaden und in den Ordner “modules” einfügen. Nach einer umfangreichen Testphase werde ich dieses Plugin auch im offiziellen Contao Extension Repository veröffentlichen.

Download: minify_less_css_js.zip