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

關(guān)鍵要點

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

Angular 應(yīng)用壓縮的問題

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

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);
            });
        }
    };   
}]);

在下一個示例中，crud.config 模塊代碼仍然不是壓縮安全的，但代碼比之前的代碼短。它只是命名服務(wù)，然後將必要的依賴項作為參數(shù)傳遞到函數(shù)中，而無需先將它們作為字符串寫出來。只要不進(jìn)行壓縮，這段代碼就可以正常運行。因此，很容易理解為什麼人們在編寫 AngularJS 代碼時經(jīng)常選擇這種語法。

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);
            });        
        }
    };
});

既然您已經(jīng)了解了這兩段代碼的物理差異，我將快速解釋為什麼這種語法不適合壓縮。

數(shù)組表示法的運作方式

如上所述，數(shù)組表示法以 DI 註解開頭，這在使代碼壓縮安全方面起著關(guān)鍵作用。當(dāng) UglifyJS 運行時，它會將我們的參數(shù)從 $scope 和 $http 分別重命名為 a 和 b。作為字符串傳遞到數(shù)組中的 DI 註解的存在阻止了它們被重命名。因此，這些重命名的參數(shù)仍然可以訪問必要的依賴項。如果這些註解不存在，代碼將中斷。如您所見，以這種方式手動編寫代碼非常低效。為了幫助您避免這種情況，我現(xiàn)在將展示如何使用 Grunt 以完全優(yōu)化的方式對 AngularJS 應(yīng)用進(jìn)行註解、拼接和壓縮，並使其準(zhǔn)備好用於生產(chǎn)環(huán)境。

使用 Grunt

可以在 GitHub 上找到項目的整個存儲庫，包括我們將要定位的文件。對於那些習(xí)慣使用 Grunt 的人，可以隨意繼續(xù)操作並創(chuàng)建您自己的構(gòu)建，或?qū)⒋舜a添加到現(xiàn)有項目中。如果您正在使用空目錄，則必須確保目錄中有一個“package.json”文件?？梢酝ㄟ^運行命令 npm init 來創(chuàng)建此文件。一旦您的項目中有了“package.json”文件，就可以通過運行以下命令下載插件：

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);
            });
        }
    };   
}]);

這會將 Grunt 安裝到您的項目中，以及我們將使用的三個插件：

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

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

三步生成壓縮安全的代碼

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

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

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);
            });        
        }
    };
});

步驟 2 – 加載和註冊 Grunt 任務(wù)

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

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);
            });
        }
    };   
}]);

步驟 3 – 配置插件

ngAnnotate

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

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);
            });        
        }
    };
});

拼接

現(xiàn)在您已經(jīng)生成了一個包含新註解的 AngularJS 代碼的文件夾，讓我們繼續(xù)通過編譯或?qū)⒋舜a拼接成一個單一文件。與我們?yōu)?ngAnnotate 創(chuàng)建部分的方式相同，我們現(xiàn)在將為 concat 和 UglifyJS 執(zhí)行相同的操作。與 ngAnnotate 一樣，這兩個任務(wù)都接受一個目標(biāo)，在本例中為 js?？梢詫⒃S多配置選項傳遞到這些任務(wù)中，但我們只是簡單地指定 src 和 dest 以指向正確文件。正如您可能猜到的那樣，這些插件將獲取傳遞到 src 對象的文件內(nèi)容，並將它們處理到 dest 後面指定的文件夾中。讓我們嘗試?yán)斫膺@裡發(fā)生了什麼。您可以通過在終端中運行 grunt concat 來測試這一點，它應(yīng)該導(dǎo)致創(chuàng)建 ./public/min/app.js。

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);
            });
        }
    };   
}]);

壓縮

我們需要做的最後一件事是從代碼中刪除無用的空間，方法是壓縮它。這就是 UglifyJS 插件發(fā)揮作用的地方。在使用 UglifyJS 時，我們希望 Grunt 完成壓縮應(yīng)用程序的最終過程。因此，我們要定位包含所有新拼接代碼的文件，在本例中為 public/min/app.js。要測試這一點，請運行 grunt uglify，並查看您新壓縮的文件。以下是此任務(wù)的相關(guān)配置：

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);
            });        
        }
    };
});

在本課程中，我們分別使用了所有這些任務(wù)?，F(xiàn)在，讓我們使用之前創(chuàng)建的默認(rèn)任務(wù)。它允許 Grunt 按註冊順序一個接一個地運行所有指定的任務(wù)。現(xiàn)在，只需在項目中運行 grunt，您的代碼就會被註解、拼接和壓縮。

結(jié)論

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

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

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

以上是5分鐘到最小的角度代碼與咕unt聲的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！