JavaScript und CSS Dateien zusammenfassen, verkleinern und verschleiern

Komplexe Web-Projekte bestehen meist aus mehreren CSS und JavaScript-Dateien. Oft werden die Styles eines CSS-Elements auch in mehreren Dateien gesetzt. Beim Release des Projektes bietet es sich dann an, in solchen Fällen die CSS-Dateien zusammenzuführen (merge). Man sollte auch Leerzeichen und Zeilenumbrüche entfernen, um die Dateien klein zu halten. Die Verwendung von Sammeleigenschaften (wie beispielweise background) anstatt der Verwendung der einzelnen Eigenschaften (in diesem Fall background-color, background-position, etc.) hilft ebenfalls dabei, schlanke Dateien zu erzeugen. Es gibt noch ein Dutzend weiterer Tricks, die das Verkleinern von CSS-Dateien zu einer Wissenschaft machen.

Noch komplizierter wird es mit JavaScript. In JavaScript geht man sogar soweit, dass der Code für das Release verschleiert wird (Obfuscation). Sprechende Variablennamen werden dann in „a1“, „a2“ und Ähnliches umbenannt. Das erfordert außerordentlich viel Mühe und Arbeit. Zum Glück gibt es dafür Tools wie den YUI Compressor von Yahoo!, ohne die diese Arbeit schon gar nicht mehr denkbar wäre.

Ein wirklich schönes Tool, das einem die Paketierung von JavaScript und CSS-Dateien abnimmt (und auch den YUI Compressor verwendet), ist Juicer. Juicer ist richtig abgefahren und bietet beispielweise die Möglichkeit, alle in einer CSS-Datei benutzten Grafiken als BASE64-enkodierte Zeichenkette direkt in die CSS-Datei einzubetten.

Ich möchte daher zeigen, wie einfach es ist, das RubyGem Juicer unter Windows zu installieren und zu benutzen.

Installation

  1. Ruby 1.8.7-p358 inklusive RubyGems installieren (von RubyInstaller for Windows) und während der Installation darauf achten, dass die PATH-Variablen mitgesetzt werden
  2. Nach der Installation in der Konsole mit ruby -v und gem -v testen, ob Ruby und RubyGems erfolgreich installiert worden sind (Screenshot)
  3. Juicer von GitHub herunterladen (aktuelle ZIP-Datei) und auf der Festplatte entpacken
  4. In der Konsole in den entpackten Juicer-Ordner wechseln und Juicer sowie die benötigten Abhängigkeiten installieren:
    gem install juicer
    juicer install yui_compressor
    juicer install closure_compiler
    juicer install jslint
  5. In der Interactive Ruby Shell (kurz IRB) kann über die Konsole ausprobiert werden, ob die Juicer-Installation erfolgreich war (siehe Screenshot):
    irb
    require "rubygems"
    require "juicer"
    exit
  6. Wird überall „true“ angezeigt, wurde Juicer installiert. Glückwunsch!

Verwendung

Eine der einfachsten Aufgaben von Juicer ist das Verkleinern von CSS-Dateien. Dazu muss man nur die Datei angeben, die verkleinert werden soll, sowie die Ausgabedatei. Auf der Kommandozeile sieht das dann so aus:

cd C:\my_web_project\css
juicer merge style.css -o minified.css

Weitere Möglichkeiten von Juicer erhält man über juicer -h oder aus der Datei „Readme.rdoc“ aus dem Juicer-Archiv. Möchte man beispielsweise Bilder im BASE64-Format einbinden, kann man das wie folgt tun:

cd C:\my_web_project\css
juicer merge style.css -o minified.css --embed-images data_uri

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.