Marian Steinbach: Blog

In diesem Artikel zeige ich, wie ich mittels Perl das Zusammenfassen und Minimieren von CSS- und JavaScript-Dateien automatisiere, um die Ladezeiten für Endnutzer möglichst kurz zu halten. Möglicherweise ist das Vorgehen und der Code ja auch für andere nützlich.

Wer schnelle Websites und Webapplikationen bauen möchte, wird sich bald mit dem Zusammenfügen und Minimieren von JavaScript-Code beschäftigen. Denn Frameworks wie YUI, JQuery oder ExtJS haben die Eigenschaft, den eigenen Code um zusätzliche Dateien zu erweitern. Jede einzelne dieser Dateien will zum Client des Nutzers übertragen werden, und das bedeutet jeweils einen HTTP-Request. Aber HTTP-Requests kosten Zeit.

Also ist das Ziel, wenn wir schnelle und responsive Applikationen entwickeln wollen, die Anzahl der HTTP-Zugriffe auf externe Script- und Stylesheet-Dateien auf ein Mindestmaß zu begrenzen. Hintergründe dazu gibt es z.B. von Yahoo und von Google. Und eine einfache Methode, um das zu erreichen, ist das Zusammenfassen von Dateien. Und wenn man schon mal dabei ist, will man natürlich direkt dafür sorgen, dass die Dateien dabei so klein werden wie möglich.

Während der Entwicklung ist es allerdings in vielen Fällen ein Hinderniss, wenn man Script-Dateien und CSS vorzeitig zusammenfügt und minimiert. Sie werden dadurch weitgehend unlesbar und verteiltes Arbeiten wird praktisch unmöglich.

Also bietet es sich an, mit nicht-minimierten und vereinzelten Dateien zu arbeiten, die dann bei Bedarf einfach und schnell zu einer CSS- bzw. JavaScript-Datei zusammengefasst werden.

Hierfür habe ich mir ein Perl-Script gebaut, das diesen Vorgang mühelos erledigt. Den gesamten Quelltext habe ich unter http://gist.github.com/478245 abgelegt.

Das Script benötigt neben dem Perl-Interpreter das CPAN-Modul JavaScript::Minifier. Bei korrekt konfiguriertem System und vorhandener Internet-Verbindung lässt sich dieses mit diesem Aufruf im Terminal installieren:

perl -MCPAN -e "install JavaScript::Minifier"

Hinweis: Zum Installieren von CPAN-Modulen benötigt man “make”. Das bekommt man unter Mac OS X über XCode, unter Linux etc. über den Paketmanager der Wahl (unter Debian zum Beispiel über “apt-get install make”) und unter Cygwin über den Paketmanager (Setup.exe).

Um das Script einsetzen zu können, müssen ein paar Einstellungen im oberen Teil angepasst werden. Man erhält so für jedes Projekt eine angepasste Datei, die man am besten im entsprechenden Kontext mit einem sinnvollen Namen ablegt.

Die ersten beiden Optionen sind die Pfade der Ordner, in denen sich meine CSS- und JavaScript-Quellen befinden. Die Pfade werden idealerweise absolut angegeben, so dass es keine Rolle spielt, aus welchem Verzeichnis ich das Script letztendlich aufrufe.

$js_root = '/var/www/s.sendung.de/js';
$css_root = '/var/www/s.sendung.de/css';

Im nächsten Block werden die JavaScript- und CSS-Dateien benannt, die zusammengefasst werden sollen. Die Pfade werden dabei relativ zu den oben angegebenen Root-Verzeichnissen interpretiert.

@js_files = (
'jquery-1.4.2-min.js',
'jquery-ui.min.js',
'functions.js'
);

@css_files = (
'jquery-ui-blueskin.css',
'styles.css'
);

Wichtig: Die Reihenfolge ist hier entscheidend. Die Dateien werden exakt in der aufgeführten Reihenfolge aneinander gehängt. Sowohl bei der Interpretation von JavaScript als auch von CSS ist die Reihenfolge von Bedeutung.

Die nächsten zwei Zeilen Code bestimmen den Namen und Pfad der Ausgabedateien:

$js_outputfile = $js_root.'/compact.js';
$css_outfile = $css_root.'/compact.css';

In diesem Beispiel werden die Ausgabedateien in den selben Ordner geschrieben wie die Quellen. Hier ist jedoch auch jeder beliebige andere Pfad nutzbar. Idealerweise lässt man die Dateien jedoch dort ablegen, wo sie letztlich auch hingehören, also wo sie per href- bzw. src-Attribut referenziert werden können.

Ist die Datei fertig konfiguriert, erfolgt der Aufruf des Scripts per Kommandozeile. In diesem Fall heißt das Perl-Script “make_compact_js_css.pl”. Der Aufruf aus dem selben Verzeichnis:

perl ./make_compact_js_css.pl

Einen kleinen Augenblick später liegen schon die frisch gebackenen JS- und CSS-Ausgabedateien an ihrem Bestimmungsort.

Update, 17. Feb 2011: Eine Variante des obigen Scripts in Python biete ich auf GitHub unter https://github.com/marians/py-css-js-cruncher an.

Discuss