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:

<project name="myproject" default="cleanup">
  <target name="cleanup"></target>
</project>

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

<project name="myproject" default="cleanup">
  <target name="init"></target>
  <target name="concat" depends="init"></target>
  <target name="compress" depends="concat"></target>
  <target name="cleanup" depends="compress"></target>
</project>

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.

<project name="myproject" default="cleanup">
  <target name="init">
    <mkdir dir="../_tmpjs"/>
    <mkdir dir="../jsmin"/>
  </target>
  <target name="concat" depends="init"></target>
  <target name="compress" depends="concat"></target>
  <target name="cleanup" depends="compress">
    <delete dir="../_tmpjs"></delete>
  </target>
</project>

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:

<project name="myproject" default="cleanup">
  <target name="init">
    <mkdir dir="../_tmpjs"/>
    <mkdir dir="../jsmin"/>
  </target>
  <target name="concat" depends="init">
    <copy todir="../_tmpjs/" overwrite="true">
      <fileset dir="./">
        <include name="*.js"/>
        <exclude name="_*.js"/>
        <exclude name="prototype.js"/>
      </fileset>
    </copy>
    <concat destfile="../_tmpjs/full.js">
      <fileset dir="../_tmpjs"><include name="*.js"/></fileset>
    </concat>
  </target>
  <target name="compress" depends="concat"></target>
  <target name="cleanup" depends="compress">
    <delete dir="../_tmpjs"></delete>
  </target>
</project>

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:

<project name="myproject" default="cleanup">
  <path id="cp">
    <fileset dir="/path/to/jars" includes="*.jar"/>
  </path>
  <taskdef name="compress-js" classname="com.webpanes.tools.ant.taskdefs.CompressJS" classpathref="cp"/> 
  <target name="init">
    <mkdir dir="../_tmpjs"/>
    <mkdir dir="../jsmin"/>
  </target>
  <target name="concat" depends="init">
    <copy todir="../_tmpjs/" overwrite="true">
      <fileset dir="./">
        <include name="*.js"/>
        <exclude name="_*.js"/>
        <exclude name="prototype.js"/>
      </fileset>
    </copy>
    <concat destfile="../_tmpjs/full.js">
      <fileset dir="../_tmpjs"><include name="*.js"/></fileset>
    </concat>
  </target>
  <target name="compress" depends="concat">
    <compress-js file="../_tmpjs/full.js" todir="../js-min" verbose="true" stripCR="true"></compress-js>
  </target>
  <target name="cleanup" depends="compress">
    <delete dir="../_tmpjs"></delete>
  </target>
</project>

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.

Mikko Ohtamaa zeigt hier, wie das bekannte JSLint direkt beim Entwickeln von Javascript in Eclipse (Ich nutze Aptana, hat viele nette Features und basiert auf Eclipse) dafür sorgen kann, Probleme zu vermeiden, bzw. zu verringern.
Vielen Dank dafür!