JavaScript in Visual Studio automatisch kombinieren und minifizieren

1343820859_utilities-file-archiverSeit einigen Wochen programmiere ich jetzt an einer Anwendung für das Playbook in JavaScript und HTML5. Mittlerweile hat sich eine ganze beträchtliche Menge an Klassen angesammelt, die man auch in anderen Projekt benutzen könnte. Es ist als höchste Zeit den Haufen JavaScript-Dateien besser zu organisieren und wiederverwendbar zu machen. Ganz nebenbei wäre es natürlich toll, wenn man die Dateien noch ein wenig zusammenstampfen könnte Smiley.


Ein Tool zum JavaScript komprimieren

Zuerst wählen wir unsere Waffe. Tools zum Komprimieren gibt es genug. Da gibt es z.B. den YUI Compressor oder Packer.

Der YUI Compressor ist sehr mächtig, benötigt aber die Java-VM. Der Packer ist vor allem für seinen Base64-Modus bekannt, produziert damit aber ordentlich Aufwand auf der Clientseite.

Einfach und zweckmäßig ist das Tool JSMin. Es braucht keine Kommandozeilenparamater und kann über die Standardeingabe gefüttert werden.

JSMin aus der Kommandozeile aufrufen

Die erste Benutzung ist simpel. Sagen wir z.B. wir haben folgendes Script:

(function () {
    // namespace math
    devbar.math = new Object();

    devbar.math.round = function (val, precision) {
        var factor = Math.pow(10, precision);
        return Math.round(val * factor) / factor;
    }

    devbar.math.getHighestDivisor = function (a, b) {
        do {
            if (a > b)
                a = a - b;
            else
                b = b - a;
        }
        while (a != b);

        return a;
    }
} ());

Dann lässt sich mit diesem Aufruf ein komprimiertes Script erzeugen:

D:\Portable\jsmin>jsmin < math.js

(function(){devbar.math=new Object();devbar.math.round=function(val,precision){v
ar factor=Math.pow(10,precision);return Math.round(val*factor)/factor;}
devbar.math.getHighestDivisor=function(a,b){do{if(a>b)
a=a-b;else
b=b-a;}
while(a!=b);return a;}}());

Mit dem < leitet man den Dateiinhalt an die jsmin.exe weitere. Lässt man den Teil weg, kann man das Script per Eingabeaufforderung eingeben. Will man die Ausgabe des Tools wieder eine eine Datei umleiten, so kann diese z.B. mit diesem Aufruf gemacht werden.

D:\Portable\jsmin>jsmin < math.js > math.min.js

 

Die Projektstruktur herstellen

JSDevbar - Microsoft Visual Studio_2012-08-01_12-46-33Die Framework-Dateien habe ich aus dem Tool-Projekt genommen und in eine eigene Mappe übernommen. Später können anderer Projekte dann einfach auf das letzte Build dieses Projekts zugreifen. Entwickelt wird nur noch zentral in diesem Projekt.

Ich bin bereits so verfahren, dass jeder Sub-Namespace seine eigene Datei bekommen hat. Somit habe ich den Vorteil, dass die Entwicklung übersichtlich bleibt.

Das Problem ist nur, dass das die Script auch alle in die entsprechende HTML-Datei eingebunden werden müssen. Später braucht man nur noch eine kombinierte Datei referenzieren.

Buildereignisse konfigurieren

Das einfachste die jsmin.exe aufzurufen ist natürlich im Build-Prozess. Evtl. gibt es Entwickler die es vorziehen sich ein Hintergrundtask anzulegen, der alle X Sekunden die bearbeitetet Scripts zusammenpackt –Geschmackssache Smiley.

BE - JSDevbar - Microsoft Visual Studio_2012-08-01_12-53-35

Wenn man sich die Arbeit ein wenig vereinfachen möchte, kann man zum Bearbeiten des Kommandos den Button Postbuild bearbeiten… nutzen.

Komprimieren und Kombinieren

Am Ende sollte dann, je nachdem wo eure jsmin.exe liegt, so etwas herauskommen.

type "$(ProjectDir)devbar\*.js" | D:\Portable\jsmin\jsmin.exe > "$(ProjectDir)devbar\devbar.min.js"

Der erste Teil vor der Pipe sammelt die Dateien aus dem Ordner devbar ein und übergibt sie an jsmin.exe. Der Output wird dann einfach an devbar.min.js umgeleitet.

Damit die Datei bei jedem Build überschrieben wird, kann man das Löschen der Ausgabe voranstellen.

del "$(ProjectDir)devbar\devbar.min.js"

Abhängigkeiten berücksichtigen

Wenn es innerhalb der Dateien Abhängigkeiten in den Scripten gibt, kann es wichtig sein, in welche Reihenfolge die Dateien zusammengefügt werden. Das devbar-Framework referenziert beispielsweise das jQuery-Framework. Will man die Dateien kombinieren würde dies in folgende Reihenfolge gemacht werden.

...
devbar.js
io.js
jQuery.js
math.js
...

Das funktioniert so nicht. Denn jQuery müsste als erstes eingebunden werden. Man kann das Problem relativ einfach umgehen, indem man einfach Ziffern voranstellt.

...
00_jQuery.js
01_devbar.js
02_io.js
03_math.js
...

Fazit

Das automatisierte Bauen der Scripte ist einfach erledigt. Diese Lösung enthält allerdings noch keine Möglichkeit zum obfuskieren, was ja einigen Entwicklern auch ein wichtiges Anliegen ist.

Ich habe eher die App-Entwicklung in Sicht, sodass das Komprimieren nicht so wichtig ist, wie das Zusammenfügen.

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>