5 Minuten zum min-sicheren Winkelcode mit Grunzen

Die Optimierung der Webleistung

ist das Hauptproblem, auf das jeder Webanwendungs ​​-Entwickler aufmerksam macht. Aufgabenläufer wie Grunzen spielen eine Schlüsselrolle im Entwicklungsprozess. Wir werden eine Reihe von Grunzen -Plugins verwenden, um sicherzustellen, dass AngularJS -Anwendungen sicher komprimiert werden können. Bevor ich über AngularJs und Komprimierung diskutiere, möchte ich betonen, dass Entwickler aller Fähigkeiten von diesem Tutorial profitieren können, aber es ist besser, die Grundlagen des Grunzens zu haben. In diesem Artikel werden wir Grunzen verwenden, um neue Ordner zu generieren, sodass Grunzenanfänger auch ein gutes Verständnis dafür haben können, wie es funktioniert.

Schlüsselpunkte

• Taskläufer wie Grunzen automatisieren Code -Nähte und -komprimierung, optimieren Sie die Seitengeschwindigkeit während der Entwicklung. Das Grunzplug-In stellt sicher, dass AngularJS-Anwendungen sicher komprimiert werden können.
• standardmäßig sind AngularJS -Anwendungen nicht komprimierbar und müssen in Array -Syntax geschrieben werden. Wenn Uglifyjs ausgeführt wird, wird die Parameter umgebracht, aber die Existenz von DI -Annotationen im Array verhindert, dass sie umbenannt werden, um sicherzustellen, dass die umbenannten Parameter immer noch Zugriff auf die erforderlichen Abhängigkeiten haben.
• Grunzen kann verwendet werden, um die Annotations-, Spleiß- und Komprimierungsprozesse von AngularJS -Anwendungen zu automatisieren. Nach der Installation der erforderlichen Plug-Ins und der Konfiguration von Grunzen, um die Datei "package.json" zu lesen, wird die Aufgabe geladen und registriert. Konfigurieren Sie dann das Plugin, um bestimmte Dateien zu finden.
• grunzen hilft beim Schreiben eines sichereren Winkelcode, indem er Aufgaben automatisiert, die Fehler erfassen und verhindern. Es kann jedes Mal, wenn die Datei gespeichert wird, Unit -Tests auf dem Code ausführen, und sendet sofort einen Fehleralarm an den Entwickler. Automatisierung spart Zeit und stellt sicher, dass wichtige Aufgaben nicht ignoriert werden.

Problem der Winkelanwendungskomprimierung

articleJS -Anwendungen sind standardmäßig nicht komprimierbar. Sie müssen in Array -Syntax geschrieben werden. Wenn Sie sich nicht sicher sind, wie die Array -Syntax ist, haben Sie wahrscheinlich Code geschrieben, um ihn zu verwenden. Schauen wir uns zwei Beispiele für AngularJS -Controller an, die die Parameter $scope und $http übergeben. Im ersten Beispiel unten werden die Fabrik und den Controller des Moduls in ein Array eingewickelt, das mit einer DI -Annotation beginnt, die, wie Sie sehen können, nicht dem trockenen Prinzip folgt (nicht wiederholen).

<code class="language-javascript">var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);</code>

Im nächsten Beispiel ist der Modulcode crud.config immer noch nicht komprimierbar, aber der Code ist kürzer als vorherige. Es benennt nur die Dienste und übergibt dann die erforderlichen Abhängigkeiten in die Funktion als Parameter, ohne sie zuerst als Zeichenfolgen auszuschreiben. Solange es keine Komprimierung gibt, wird dieser Code normal ausgeführt. Daher ist es leicht zu verstehen, warum Menschen diese Syntax beim Schreiben von AngularJS -Code häufig wählen.

<code class="language-javascript">var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});</code>

Jetzt, da Sie die physikalischen Unterschiede zwischen diesen beiden Codestücken verstanden haben, werde ich schnell erklären, warum diese Syntax nicht für die Komprimierung geeignet ist.

Wie Array -Notation

funktioniert

Wie oben erwähnt, beginnt Array -Notation mit DI -Annotationen, die eine Schlüsselrolle bei der Sicherung der Codekomprimierung spielt. Wenn Uglifyjs ausgeführt wird, wird unsere Parameter von $scope und $http in a bzw. b umgebracht. Die Existenz von DI -Annotationen, die als Saiten in ein Array übergingen, verhindert, dass sie umbenannt werden. Daher haben diese umbenannten Parameter immer noch Zugriff auf die erforderlichen Abhängigkeiten. Wenn diese Anmerkungen nicht vorhanden sind, wird der Code gebrochen. Wie Sie sehen können, ist es sehr ineffizient, Code auf diese Weise manuell zu schreiben. Um dies zu vermeiden, werde ich Ihnen jetzt zeigen, wie Sie AngularJS -Anwendungen auf eine vollständig optimierte Weise mit Grunzen und Vorbereitung für die Produktion annotieren, spleifen und komprimieren.

Verwenden Sie GrunT

Das gesamte Repository des Projekts finden Sie in GitHub, einschließlich der von uns befindlichen Dateien. Für diejenigen, die es gewohnt sind, Grunzen zu verwenden, können Sie fortfahren und Ihren eigenen Build erstellen oder diesen Code einem vorhandenen Projekt hinzufügen. Wenn Sie ein leeres Verzeichnis verwenden, müssen Sie sicherstellen, dass sich im Verzeichnis eine "package.json" -Datei befindet. Diese Datei kann erstellt werden, indem der Befehl npm init ausgeführt wird. Sobald Sie die Datei "package.json" in Ihrem Projekt haben, können Sie das Plugin herunterladen, indem Sie den folgenden Befehl ausführen:

<code class="language-javascript">var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);</code>

Dies wird Grunzen in Ihr Projekt und die drei Plugins installieren, die wir verwenden:

• grunt-contrib-concat
• grunt-contrib-uglify
• grunt-ng-annotate

Während NG-Annotate ohne Grunzen verwendet werden kann, werden Sie bald sehen, wie nahtloses Grunzen den Prozess des Annotierens, Spleißens und Komprimierens Ihres Codes macht. Es bietet eine einfache und effektive Lösung zum Komprimieren von AngularJS -Code. Wenn Sie dieses Projekt von Grund auf neu verfolgen, sollten Sie im Projektroot -Verzeichnis eine gruntfile.js haben, die den gesamten Grunzcode enthält. Wenn Sie es noch nicht getan haben, erstellen Sie es jetzt.

Drei Schritte zur Erzeugung von Kompressionssicherer Code

Schritt 1 - GRUNT konfigurieren, um die Datei "package.json" zu lesen

Um auf das zuvor installierte Plugin zugreifen zu können, müssen Sie zunächst die pkg Eigenschaft der Gruntfile konfigurieren, um den Inhalt der Datei "package.json" zu lesen. Das Objekt config beginnt oben in der Grunzverpackungsfunktion und erstreckt sich im folgenden Beispiel von Zeile 3 bis Zeile 5, wird jedoch bald den größten Teil des Codes enthalten.

<code class="language-javascript">var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});</code>

Schritt 2 - Laden und Registrieren von Grunzaufgaben

Nach dem Konfigurieren von Grunzen zum Lesen unserer "package.json" -Dateien müssen Plugins geladen werden, damit Grunn darauf zugreifen kann. Dies geschieht, indem der Namen des Plugins als Zeichenfolge in grunt.loadNpmTask() übergeben wird. Stellen Sie sicher, dass diese Plugins in der Wrapper -Funktion geladen sind, aber außerhalb des -Objekts. Wenn diese Bedingungen nicht erfüllt sind, funktioniert das Grunzen nicht ordnungsgemäß. Als nächstes müssen wir eine Standardaufgabe erstellen, die ausgeführt wird, wenn Grunt ohne ein bestimmtes Ziel aufgerufen wird. Sie sollten vorsichtig mit der Reihenfolge sein, in der diese Aufgaben hinzugefügt werden, da sie entsprechend ihrer Konfiguration ausgeführt werden. Hier ist NganNotate so konfiguriert, dass er zuerst ausgeführt wird, dann concat und huglifyjs, was meiner Meinung nach der beste Weg ist, um Ihren Code zu erstellen. Es ist auch wichtig zu beachten, dass config nach dem Laden des Plugins platziert werden muss. Basierend auf dem, was wir gerade besprochen haben, sollte Gruntfile.js so aussehen: grunt.registerTask()

Schritt 3-Konfigurieren des Plug-in

<code class="language-javascript">var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);</code>

ngannotate

Jetzt, da unsere Gruntfile fertig ist, gehen wir zurück zum

-Objekt und geben die Datei an, die das Ngannotate -Plugin finden soll. Dazu müssen wir zunächst einen Teil für Ngannotate erstellen und in diesem Fall ein Ziel namens

erstellen. In diesem Ziel geben Sie die Datei an, zu der Sie DI -Annotationen hinzufügen möchten, und den Ordner, zu dem sie generiert werden sollte. In diesem Beispiel nimmt Grunt die drei in

angegebenen Dateien und generiert sie in einen neuen Ordner namens config. Sobald die Konfiguration abgeschlossen ist, können Sie spApp ausführen und sehen, wie der Code generiert wird. Darüber hinaus können Sie die Github-Seite von GrunT-NG-Annotate besuchen und die verschiedenen Optionen sehen, die Sie angeben können. public/js public/min-safe grunt ngAnnotate split

<code class="language-javascript">var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});</code>

Jetzt, da Sie einen Ordner mit dem AngularJS -Code mit den neuen Anmerkungen generiert haben, lassen Sie uns diesen Code fortsetzen oder in eine einzige Datei gespleißt. Genauso wie wir den Abschnitt für Ngannotate erstellt haben, werden wir nun dasselbe für Concat und UglifyJs tun. Wie Ngannotate akzeptieren beide Aufgaben in diesem Fall

ein Ziel. Viele Konfigurationsoptionen können in diese Aufgaben übergeben werden, aber wir geben einfach

und

an, um auf die richtige Datei zu verweisen. Wie Sie vielleicht erraten haben, erhalten diese Plugins den Dateiinhalt an das an das js Objekt übergebene Objekt und verarbeiten sie in den nach src angegebenen Ordner. Versuchen wir zu verstehen, was hier vor sich geht. Sie können dies testen, indem Sie dest in Ihrem Terminal ausgeführt werden. Dies sollte zur Erstellung von src führen. dest

<code class="language-javascript">var form = angular.module('ControllerOne', [])
form.factory('Users', ['$http', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
}]);

form.controller('InputController', ['$scope', '$http', 'Users', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function () {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
                .success(function (data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });
        }
    };   
}]);</code>

Komprimierung

Das Letzte, was wir tun müssen, ist, den nutzlosen Platz aus dem Code zu entfernen, indem wir ihn komprimieren. Hier kommt das Uglifyjs -Plugin ins Spiel. Bei der Verwendung von UglifyJs möchten wir, dass Grunzen den endgültigen Prozess der Komprimierung der Anwendung abschließen. Daher möchten wir die Datei mit allen neuen Spleißcodes finden, in diesem Fall public/min/app.js. Um dies zu testen, führen Sie grunt uglify aus und sehen Sie sich Ihre neu komprimierte Datei an. Im Folgenden finden Sie die relevanten Konfigurationen für diese Aufgabe:

<code class="language-javascript">var form = angular.module('ControllerTwo', [])
form.factory('Users', function($http) {
    return {
        get: function() {
            return $http.get('/api/users');
        },
        create: function(userData) {
            return $http.post('/api/users', userData);
        },
        delete: function(id) {
            return $http.delete('/api/users/' + id);
        }
    };
});

form.controller('InputController', function($scope, $http, Users) {
    formData = {};
    $scope.createUser = function() {
        if ($scope.formData != undefined) {
            Users.create($scope.formData)
            .success(function(data) {
                $scope.users = data;
                $scope.formData = {};
                $scope.myForm.$setPristine(true);
            });        
        }
    };
});</code>

In diesem Kurs haben wir alle diese Aufgaben getrennt verwendet. Lassen Sie uns nun die zuvor erstellte Standardaufgabe verwenden. Es ermöglicht Grunzen, alle angegebenen Aufgaben einzeln in Registrierungsreihenfolge auszuführen. Führen Sie nun einfach in Ihrem Projekt grunt aus und Ihr Code wird kommentiert, gespleißt und komprimiert.

Schlussfolgerung

Ich hoffe, dass Sie mit diesem kurzen Tutorial die Array -Notation gut verstehen können und warum es wichtig ist, AngularJS -Anwendungskomprimierung sicher zu machen. Wenn Sie neu zu grunzen sind, empfehle ich Ihnen dringend, diese Plugins sowie andere zu probieren, da sie viel Zeit sparen können. Wie immer können Sie sich wie immer gerne kommentieren oder wenn Sie Fragen haben, senden Sie mir bitte eine E -Mail an die Adresse in meinem Profil.

FAQ (FAQ) auf dem Kompressionssicheren Winkelcode mit Grunzen

(der gleiche FAQ -Teil sollte hier wie im Originaltext enthalten sein, aber die Sprache ist reibungsloser und natürlicher)

Das obige ist der detaillierte Inhalt von5 Minuten zum min-sicheren Winkelcode mit Grunzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!