AngularJS minification mit npm (node.js) und ng-annotate


Wenn ich aktuell AngularJS Module erstelle, dann achte ich bereits darauf das der Code minify fähig ist. Denn durch die Verwendung von Dependency Injection (DI) von AngularJS muss beim Schreiben von AngularJS Modulen bereits darauf geachtet werden das der Code minify fähig ist.

Daher wird aus dem Folgenden nicht minify fähigen Code:

angular.module("AngularStrapModalCtrl", [])
    .controller("AngularStrapModalCtrl", function ($modal, $scope, modalCtrl) {
    $scope.modal = {
        testModalCtrl: modalCtrl
    };
})
.controller("modalCtrl", function ($scope) {

    this.name = "testname";
    $scope.test = "blubb";
});

Der minify fähige Code:

angular.module("AngularStrapModalCtrl", [])
    .controller("AngularStrapModalCtrl", ["$modal", "$scope", "modalCtrl", function ($modal, $scope, modalCtrl) {
    $scope.modal = {
        testModalCtrl: modalCtrl
    };
}])
.controller("modalCtrl", ["$scope", function ($scope) {

    this.name = "testname";
    $scope.test = "blubb";
}]);

Denn die Funktionsparameter die normalerweise über DI aufgelöst werden, werden in einem String Array definiert und damit weiß AngularJS auch nach dem minifien weiterhin das für einen Parameter z.B. mit dem Namen “a” als “$scope” aufgelöst werden soll. Hierbei ist es wichtig das die Reihenfolge der Werte im String Array der Parameter im Funktionsaufruf entspricht.

Wenn man aber auf Module von anderen Entwicklern zurückgreift, dann sind diese Module nicht immer minify fähig und müssten für diesen Zweck von uns von Hand angepasst werden. Hier kann uns der Node Package Manager npm weiterhelfen, der direkt mit node.js installiert wird und eine eigene Konsole zur verfügung stellt. Eine gute Einführung in npm stellt die Seite selbst zur Verfügung.

Denn für npm gibt es das Packet “ng-annotate” welches die oben genannte minify Funktion bereits vollautomatisch für uns ausführt. Installiert wird “ng-annotate” über die npm Konsole welche direkt mit node.js installiert wird.

image

Den Befehl auf der npm Konsole ausführen, um “ng-annotate” zu installieren.

npm install -g ng-annotate

Beim Installieren von npm Paketen kann es zu einem Timeout kommen, vor allem wenn man hinter einem Proxyserver sitzt. Mir hat dabei der folgende Eintrag weitergeholfen:

http://jjasonclark.com/how-to-setup-node-behind-web-proxy

Wenn “ng-annotate” erfolgreich installiert wurde, dann kann man über einen einfachen Befehl auf der npm Konsole unser Angular Modul minify fähig machen.

C:\>ng-annotate –add „c:\Temp\nichtMinifyFaehig.js“ -o „c:\Temp\minifyFaehig.js“

Die Ausgabedatei enthält dann den kompletten AngularJS Modulcode inkl. der Parameterarrays für die minification.

Das ganze lässt sich natürlich entsprechend ausbauen, das dies immer ausgeführt wird wenn das Projekt erstellt wird, … hier sind dem Entwickler wie immer keine Grenzen gesetzt.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s