Ant.png

Ameisen für JavaScript-Projekte

Posted by & filed under dev, featured, javascript.

Heute habe ich mal wieder Zeit, mich mit einem weiteren Thema zu beschäftigen, was mir schon seit längerem im Kopf rumschwirrt: Ein Buildskript für JavaScript-Projekte. Natürlich lässt sich da nicht wirklich was „bauen“, aber ich würde gerne bei der Auslieferung eines Projektes mehrere Dateien zu einer zusammenfassen und dann noch das gesamte Skript minimieren. Das hat zum Einen für den Anwender den Vorteil, das sich die Ladezeiten ebenfalls minimieren, zum Anderen find ich es einfach cool 😉 .
Ich nutze, wie ich früher schon mal berichtet habe, meistens Eclipse zur JavaScript Entwicklung. Diese IDE bringt Apache Ant mit, ein Java-basiertes Build-Tool, welches sich mit einer build.xml-Datei wunderbar steuern lässt und ich bereits vor längerem mal mit gearbeitet habe, allerdings nicht für JavaScript. Also ist es naheliegend, das ich dieses Tool hier verwende.
Also was soll mein Build-Skript denn können?

  • Mehrere JavaScript Dateien zu einer einzigen Datei zusammenfassen
  • Diese Datei komprimieren
  • Die komprimierte Datei in einen extra Ordner speichern und den Workspace aufgeräumt hinterlassen

Zuerst muss einmal eine Datei in meinem Workspace erzeugt werden, die build.xml. Ich erstelle sie direkt in meinem JavaScript-Ordner, natürlich könnte sie auch woanders stehen. Sie bekommt natürlich gleich den Projektnamen „myproject“ und als Einstiegspunkt den letzten Punkt von meiner Liste:


Jetzt soll vor dem Cleanup natürlich noch die einzelnen Punkte abgearbeitet werden:


Nachdem jetzt die Struktur schon mal steht, kann ich mal anfangen. Als erstes sollen zwei Verzeichnisse erstellt werden, das erste Verzeichnis „_tmpjs“ als reines Arbeitsverzeichnis, das nach dem Build wieder entfernt werden soll, das zweite Verzeichnis „jsmin“ soll die fertige Datei aufnehmen.


In das Arbeitsverzeichnis werden jetzt alle Dateien kopiert, die ich später in meiner Ergebnis-Datei haben will. Das ist natürlich Projekt- und auch Programmierer-Abhängig, in meinem Fall sollen WebWorker (die sowieso in einem anderen Verzeichnis stehen) und Dateien, die mit einem Unterstrich beginnen, nicht mit einbezogen werden. Nach dem Kopieren können dann auch gleich die Dateien in eine zusammengefügt werden, da es sich bei JavaScript meist um reine Text-Dateien handelt, gestaltet sich das auch relativ einfach:


Nach diesem Schritt haben wir bereits eine Datei „full.js“ im Arbeitsordner liegen, der aber wieder gelöscht wird. Der letzte Schritt, das Minimieren des Codes fehlt ja auch noch. Dank Dr. Google kam ich auf die folgende Seite:
http://lcasoft.com/compress-js.html
Hier werden zwei jar-Archive angeboten, die heruntergeladen werden und in den Ant-Einstellungen angegeben werden müssen:
Window->Preferences->Ant->Runtime->Classpath->Global Entries->Add External JARs
Hier einfach die beiden heruntergeladenen JARs auswählen und einfügen.

Jetzt muss noch ein neuer task definiert und der pfad zu den beiden JARs angegeben werden (Eigentlich doppelt, aber hat bei mir nicht anders funktioniert…) und dann kann das letzte target auch definiert werden:


Ich habe hier noch die Option verbose sowie stripCR mit angegeben, damit werden mehr Informationen über den Vorgang in die Console ausgegeben und in der fertigen Datei noch zusätzlich die Zeilenumbrüche entfernt. Weitere Optionen finden sich hier: http://lcasoft.com/compress-js-doc.html

Jetzt kann man einfach mit der rechten Maustaste auf die build.xml gehen und per Run As… -> Ant Build ausfüren.
Viel Spass beim Ausprobieren, Kommentare sind natürlich herzlich willkommen.

One Response to “Ameisen für JavaScript-Projekte”

Leave a Reply