グラント付きの最小セーフ角度コードまで5分

Webパフォーマンスの最適化は、すべてのWebアプリケーション開発者が注意を払う主要な問題です。 Gruntなどのタスクランナーは、開発プロセスで重要な役割を果たします。これは、このチュートリアルの焦点でもあります。 AngularJSアプリケーションを安全に圧縮できるようにするために、さまざまなグラントプラグインを使用します。 Angularjsと圧縮について議論する前に、すべてのスキルレベルの開発者がこのチュートリアルの恩恵を受けることができることを強調したいと思いますが、Gruntの基本を持っている方が良いです。この記事では、Gruntを使用して新しいフォルダーを生成するため、Grunt初心者はそれがどのように機能するかをよく理解することもできます。

キーポイント

グラントオートメートコードのステッチと圧縮などのタスクランナーは、開発中のページ速度を最適化します。 Gruntプラグインは、AngularJSアプリケーションを安全に圧縮できるようにします。
デフォルトでは、AngularJSアプリケーションは圧縮できず、配列構文で記述する必要があります。 uglifyjsが実行されている場合、パラメーターの名前を変更しますが、配列にdiアノテーションの存在により変更されないようになり、変更されたパラメーターが必要な依存関係に依然としてアクセスできるようにします。
• グラントは、AngularJSアプリケーションの注釈、スプライシング、および圧縮プロセスを自動化するために使用できます。必要なプラグインをインストールし、「Package.json」ファイルを読み取るためにGruntを構成した後、タスクはロードされて登録されます。次に、プラグインを構成して特定のファイルを見つけます。
• Gruntは、エラーをキャプチャおよび防止するタスクを自動化することにより、より安全な角度コードを作成するのに役立ちます。ファイルが保存されるたびにコードでユニットテストを実行して、すぐに開発者にエラーアラートを送信できます。自動化により時間を節約し、重要なタスクが無視されないようにします。

角度アプリケーション圧縮問題articleJSアプリケーションは、デフォルトでは圧縮されません。それらは配列構文で記述する必要があります。配列の構文が何であるかわからない場合は、おそらくそれを使用するコードを書きました。 およびパラメーターを通過しているAngularJSコントローラーの2つの例を見てみましょう。以下の最初の例では、モジュールの工場とコントローラーは、Di Annotationから始まる配列に包まれています。

次の例では、$scope $http

これらの2つのコードの物理的な違いを理解したので、この構文が圧縮に適していない理由をすばやく説明します。

<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>

crud.configアレイ表記の動作

<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>

上記のように、

アレイ表記は、コード圧縮を安全にする上で重要な役割を果たすDIアノテーションから始まります。 uglifyjsが実行されると、パラメーターをそれぞれ$scopeおよび$httpおよびaに変更します。アレイに文字列として渡されたDIアノテーションの存在は、それらが名前が変更されるのを防ぎます。したがって、これらの変更されたパラメーターは、必要な依存関係に依然としてアクセスできます。これらの注釈が存在しない場合、コードは壊れます。ご覧のとおり、この方法で手動でコードを記述することは非常に非効率的です。これを避けるために、Gruntを使用して完全に最適化された方法でAngularJSアプリケーションを注釈、スプライス、および圧縮する方法を紹介し、それらを生産の準備をします。 b

grunt を使用します

プロジェクトのリポジトリ全体は、GitHubで見つけることができます。 Gruntの使用に慣れている人のために、独自のビルドを継続して作成したり、既存のプロジェクトにこのコードを追加したりできます。空のディレクトリを使用している場合は、ディレクトリに「package.json」ファイルがあることを確認する必要があります。このファイルは、コマンドを実行して作成できます

。プロジェクトに「package.json」ファイルがあると、次のコマンドを実行してプラグインをダウンロードできます。 npm init

これにより、プロジェクトにgruntをインストールし、使用する3つのプラグインが使用されます。

<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>

• grunt-contrib-concat
• grunt-contrib-uglify
• grunt-ng-annotate ng-annotateはうなり声を上げることなく使用できますが、シームレスなグラントがコードを注釈、スプライシング、圧縮するプロセスをどのようにするかをすぐに見るでしょう。 AngularJSコードを圧縮するためのシンプルで効果的なソリューションを提供します。このプロジェクトをゼロから追跡している場合は、プロジェクトルートディレクトリにgruntfile.jsを使用する必要があります。これには、すべてのグラントコードが含まれます。まだ行っていない場合は、今すぐ作成してください。

圧縮セーフコードを生成するための3つのステップ

ステップ1 - 「package.json」ファイルを読むようにgruntを構成します

以前にインストールしたプラグインにアクセスするには、最初にgruntfileのプロパティを構成して、「package.json」ファイルの内容を読み取る必要があります。

オブジェクトは、グラントラッパー関数の上部から始まり、次の例で3行目から5行目に拡張されますが、すぐにほとんどのコードが含まれます。

pkg config

ステップ2 - グラントタスクの読み込みと登録

<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>

「Package.json」ファイルを読むようにGruntを構成した後、Gruntがアクセスできるようにプラグインをロードする必要があります。これは、プラグインの名前を文字列としてgrunt.loadNpmTask()に渡すことによって行われます。これらのプラグインがラッパー関数の内側にロードされていることを確認してください。これらの条件が満たされない場合、Gruntは適切に機能しません。次に行う必要があるのは、特定のターゲットなしでグラントが呼び出されたときに実行されるデフォルトタスクを作成することです。構成に応じて実行されるため、これらのタスクが追加される順序に注意する必要があります。ここでは、ngannotateは最初に実行するように構成されています。次にconcatとuglifyjsを構成します。これは、コードを構築するための最良の方法だと思います。また、プラグインがロードされた後にを配置する必要があることを覚えておくことが重要です。私たちが今まで議論したことに基づいて、gruntfile.jsは次のようになるはずです： config ステップ3 - プラグインの構成grunt.registerTask()

<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

GruntFileの準備が整ったので、オブジェクトに戻り、Ngannotateプラグインを見つけたいファイルを指定しましょう。これを行うには、まずngannotateのパーツを作成し、この場合はと呼ばれるターゲットを作成する必要があります。このターゲットでは、DIアノテーションを追加するファイルと、生成する必要があるフォルダーを指定します。この例では、gruntは

で指定された3つのファイルを使用し、

という名前の新しいフォルダーに生成します。構成が完了したら、

を実行して、コードの生成方法を確認できます。さらに、Grunt-ng-AnnotateのGithubページにアクセスして、指定できるさまざまなオプションを確認できます。

config spAppsplitpublic/js public/min-safe新しいアノテーションを備えたAngularJSコードを備えたフォルダーを生成したので、このコードを単一のファイルにコンパイルまたはスプライシングしても、続行しましょう。 Ngannotateのセクションを作成したのと同じように、ConcatとUglifyjsについても同じことを行います。 ngannotateと同様に、両方のタスクはターゲット、この場合はgrunt ngAnnotateを受け入れます。これらのタスクに多くの構成オプションを渡すことができますが、正しいファイルを指すように

と

<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>

を指​​定するだけです。ご想像のとおり、これらのプラグインは、ファイルの内容を

オブジェクトに渡され、

の後に指定されたフォルダーに処理します。ここで何が起こっているのかを理解してみましょう。これをテストすることができます

端末で実行すると、jsが作成されるはずです。 src

<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>

圧縮

私たちがする必要がある最後のことは、コードを圧縮してコードから役に立たないスペースを削除することです。これは、uglifyjsプラグインが登場する場所です。 uglifyjsを使用する場合、Gruntがアプリケーションを圧縮する最終プロセスを完了する必要があります。したがって、すべての新しいスプライシングコード、この場合はpublic/min/app.jsを含むファイルを見つけたいと思います。これをテストするには、grunt uglifyを実行し、新しく圧縮されたファイルを表示します。以下は、このタスクの関連する構成です。

このコースでは、これらすべてのタスクを個別に使用しました。次に、以前に作成したデフォルトタスクを使用しましょう。 Gruntは、指定されたすべてのタスクを登録順に1つずつ実行できます。ここで、プロジェクトで

<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>

を実行するだけで、コードが注釈、スプライシング、圧縮されます。

grunt

結論

この短いチュートリアルでは、アレイ表記をよく理解できることと、AngularJSアプリケーションの圧縮を安全にすることが不可欠である理由を願っています。 Gruntが初めての場合は、多くの時間を節約できるため、これらのプラグインだけでなく他のプラグインを試すことを強くお勧めします。いつものように、以下にコメントしてください。ご質問がある場合は、プロフィールのアドレスにメールしてください。

グラント付きの圧縮セーフ角度コードの

FAQ（FAQ）

（元のテキストと同じFAQパーツをここに含める必要がありますが、言語はより滑らかで自然です）

以上がグラント付きの最小セーフ角度コードまで5分の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。