5分鐘到最小的角度代碼與咕unt聲

網頁性能優化是每個 Web 應用開發者都關注的首要問題。 Grunt 等任務運行器在開發過程中扮演著關鍵角色，它們自動化了代碼拼接和壓縮等任務，這也是本教程的重點。我們將使用一系列 Grunt 插件來確保 AngularJS 應用能夠安全地進行壓縮。在討論 AngularJS 和壓縮之前，我想強調一點，所有技能水平的開發者都能從本教程中受益，但最好具備 Grunt 的基礎知識。在本文中，我們將使用 Grunt 生成新文件夾，因此 Grunt 新手也能很好地了解其工作原理。

關鍵要點

• 像 Grunt 這樣的任務運行器自動化了代碼拼接和壓縮，優化了開發過程中的頁面速度。 Grunt 插件確保 AngularJS 應用能夠安全地進行壓縮。
• 默認情況下，AngularJS 應用並非壓縮安全的，必須使用數組語法編寫。當 UglifyJS 運行時，它會重命名參數，但數組中 DI 註解的存在阻止了它們被重命名，確保重命名的參數仍然可以訪問必要的依賴項。
• Grunt 可用於自動化 AngularJS 應用的註解、拼接和壓縮過程。安裝必要的插件並將 Grunt 配置為讀取“package.json”文件後，任務將被加載和註冊。然後配置插件以定位特定文件。
• Grunt 通過自動化捕獲和防止錯誤的任務來幫助編寫更安全的 Angular 代碼。它可以在每次保存文件時對代碼運行單元測試，立即向開發者發出錯誤警報。自動化節省了時間，並確保不會忽略重要任務。

Angular 應用壓縮的問題

默認情況下，AngularJS 應用並非壓縮安全的。它們必須使用數組語法編寫。如果您不確定數組語法是什麼，您可能已經編寫過使用它的代碼了。讓我們來看兩個 AngularJS 控制器示例，這兩個控制器正在傳遞 $scope 和 $http 參數。在下面的第一個示例中，模塊的工廠和控制器包裝在以 DI 註解開頭的數組中，如您所見，它不遵循 DRY（不要重複自己）原則。

<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 模塊代碼仍然不是壓縮安全的，但代碼比之前的代碼短。它只是命名服務，然後將必要的依賴項作為參數傳遞到函數中，而無需先將它們作為字符串寫出來。只要不進行壓縮，這段代碼就可以正常運行。因此，很容易理解為什麼人們在編寫 AngularJS 代碼時經常選擇這種語法。

<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 和 b。作為字符串傳遞到數組中的 DI 註解的存在阻止了它們被重命名。因此，這些重命名的參數仍然可以訪問必要的依賴項。如果這些註解不存在，代碼將中斷。如您所見，以這種方式手動編寫代碼非常低效。為了幫助您避免這種情況，我現在將展示如何使用 Grunt 以完全優化的方式對 AngularJS 應用進行註解、拼接和壓縮，並使其準備好用於生產環境。

使用 Grunt

可以在 GitHub 上找到項目的整個存儲庫，包括我們將要定位的文件。對於那些習慣使用 Grunt 的人，可以隨意繼續操作並創建您自己的構建，或將此代碼添加到現有項目中。如果您正在使用空目錄，則必須確保目錄中有一個“package.json”文件。可以通過運行命令 npm init 來創建此文件。一旦您的項目中有了“package.json”文件，就可以通過運行以下命令下載插件：

<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 安裝到您的項目中，以及我們將使用的三個插件：

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

儘管 ng-annotate 可以不用 Grunt 使用，但您很快就會看到 Grunt 使註解、拼接和壓縮代碼的過程多麼無縫。它為壓縮 AngularJS 代碼提供了一個簡單而有效的解決方案。如果您是從頭開始跟踪此項目，則應該在項目根目錄中有一個 Gruntfile.js，它將包含所有 Grunt 代碼。如果您還沒有，請立即創建它。

三步生成壓縮安全的代碼

步驟 1 – 配置 Grunt 以讀取“package.json”文件

要訪問我們之前安裝的插件，您首先需要配置 Gruntfile 的 pkg 屬性以讀取“package.json”文件的內容。 config 對像從 Grunt 包裝函數的頂部開始，在下面的示例中從第 3 行到第 5 行擴展，但很快就會包含大部分代碼。

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

步驟 2 – 加載和註冊 Grunt 任務

在配置 Grunt 以讀取我們的“package.json”文件後，需要加載插件，以便 Grunt 可以訪問它們。這是通過將插件的名稱作為字符串傳遞到 grunt.loadNpmTask() 中來完成的。務必確保這些插件是在包裝函數內部但config 對象外部加載的。如果沒有滿足這些條件，Grunt 將無法正常工作。接下來我們需要做的是創建一個默認任務，當 Grunt 在沒有特定目標的情況下被調用時將執行此任務。您應該注意添加這些任務的順序，因為它們將根據其配置運行。在這裡，ngAnnotate 配置為首先運行，然後是 concat 和 UglifyJS，我相信這是構建代碼的最佳方式。此外，重要的是要記住，grunt.registerTask() 必須放在加載插件之後。根據我們剛才討論的內容，Gruntfile.js 應該如下所示：

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

步驟 3 – 配置插件

ngAnnotate

現在我們的 Gruntfile 已準備就緒，讓我們回到 config 對像中，並指定我們希望 ngAnnotate 插件定位的文件。為此，我們首先必須為 ngAnnotate 創建一個部分並創建一個目標，在本例中稱為 spApp。在此目標中，您將指定要向其添加 DI 註解的文件，以及應將其生成的文件夾。在此示例中，Grunt 將獲取在 public/js 中指定的三個文件，並將它們生成到名為 public/min-safe 的新文件夾中。配置完成後，您可以運行 grunt ngAnnotate 並查看代碼的生成方式。此外，您可以訪問 grunt-ng-annotate 的 GitHub 頁面，並查看它允許您指定的不同選項。

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

拼接

現在您已經生成了一個包含新註解的 AngularJS 代碼的文件夾，讓我們繼續通過編譯或將此代碼拼接成一個單一文件。與我們為 ngAnnotate 創建部分的方式相同，我們現在將為 concat 和 UglifyJS 執行相同的操作。與 ngAnnotate 一樣，這兩個任務都接受一個目標，在本例中為 js。可以將許多配置選項傳遞到這些任務中，但我們只是簡單地指定 src 和 dest 以指向正確文件。正如您可能猜到的那樣，這些插件將獲取傳遞到 src 對象的文件內容，並將它們處理到 dest 後面指定的文件夾中。讓我們嘗試理解這裡發生了什麼。您可以通過在終端中運行 grunt concat 來測試這一點，它應該導致創建 ./public/min/app.js。

<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，並查看您新壓縮的文件。以下是此任務的相關配置：

<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 按註冊順序一個接一個地運行所有指定的任務。現在，只需在項目中運行 grunt，您的代碼就會被註解、拼接和壓縮。

結論

我希望通過本簡短教程，您能夠很好地理解數組表示法，以及為什麼它對於使 AngularJS 應用壓縮安全至關重要。如果您是 Grunt 新手，我強烈建議您嘗試使用這些插件以及其他插件，因為它們可以節省大量時間。與往常一樣，請隨時在下方發表評論，或者如果有什麼問題，請通過我的個人資料中的地址給我發送電子郵件。

關於使用 Grunt 進行壓縮安全的 Angular 代碼的常見問題解答 (FAQ)

(此處應包含與原文中相同的FAQ部分，但語言更流暢自然)

以上是5分鐘到最小的角度代碼與咕unt聲的詳細內容。更多資訊請關注PHP中文網其他相關文章！