搜索
首页web前端js教程5分钟到最小的角度代码与咕unt声

5 Minutes to Min-Safe Angular Code with Grunt

网页性能优化是每个 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(不要重复自己)原则。

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 模块代码仍然不是压缩安全的,但代码比之前的代码短。它只是命名服务,然后将必要的依赖项作为参数传递到函数中,而无需先将它们作为字符串写出来。只要不进行压缩,这段代码就可以正常运行。因此,很容易理解为什么人们在编写 AngularJS 代码时经常选择这种语法。

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

既然您已经了解了这两段代码的物理差异,我将快速解释为什么这种语法不适合压缩。

数组表示法的运作方式

如上所述,数组表示法以 DI 注解开头,这在使代码压缩安全方面起着关键作用。当 UglifyJS 运行时,它会将我们的参数从 $scope$http 分别重命名为 ab。作为字符串传递到数组中的 DI 注解的存在阻止了它们被重命名。因此,这些重命名的参数仍然可以访问必要的依赖项。如果这些注解不存在,代码将中断。如您所见,以这种方式手动编写代码非常低效。为了帮助您避免这种情况,我现在将展示如何使用 Grunt 以完全优化的方式对 AngularJS 应用进行注解、拼接和压缩,并使其准备好用于生产环境。

使用 Grunt

可以在 GitHub 上找到项目的整个存储库,包括我们将要定位的文件。对于那些习惯使用 Grunt 的人,可以随意继续操作并创建您自己的构建,或将此代码添加到现有项目中。如果您正在使用空目录,则必须确保目录中有一个“package.json”文件。可以通过运行命令 npm init 来创建此文件。一旦您的项目中有了“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 代码提供了一个简单而有效的解决方案。如果您是从头开始跟踪此项目,则应该在项目根目录中有一个 Gruntfile.js,它将包含所有 Grunt 代码。如果您还没有,请立即创建它。

三步生成压缩安全的代码

步骤 1 – 配置 Grunt 以读取“package.json”文件

要访问我们之前安装的插件,您首先需要配置 Gruntfile 的 pkg 属性以读取“package.json”文件的内容。config 对象从 Grunt 包装函数的顶部开始,在下面的示例中从第 3 行到第 5 行扩展,但很快就会包含大部分代码。

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

在配置 Grunt 以读取我们的“package.json”文件后,需要加载插件,以便 Grunt 可以访问它们。这是通过将插件的名称作为字符串传递到 grunt.loadNpmTask() 中来完成的。务必确保这些插件是在包装函数内部config 对象外部加载的。如果没有满足这些条件,Grunt 将无法正常工作。接下来我们需要做的是创建一个默认任务,当 Grunt 在没有特定目标的情况下被调用时将执行此任务。您应该注意添加这些任务的顺序,因为它们将根据其配置运行。在这里,ngAnnotate 配置为首先运行,然后是 concat 和 UglifyJS,我相信这是构建代码的最佳方式。此外,重要的是要记住,grunt.registerTask() 必须放在加载插件之后。根据我们刚才讨论的内容,Gruntfile.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);
            });
        }
    };   
}]);

步骤 3 – 配置插件

ngAnnotate

现在我们的 Gruntfile 已准备就绪,让我们回到 config 对象中,并指定我们希望 ngAnnotate 插件定位的文件。为此,我们首先必须为 ngAnnotate 创建一个部分并创建一个目标,在本例中称为 spApp。在此目标中,您将指定要向其添加 DI 注解的文件,以及应将其生成的文件夹。在此示例中,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);
            });        
        }
    };
});

拼接

现在您已经生成了一个包含新注解的 AngularJS 代码的文件夹,让我们继续通过编译或将此代码拼接成一个单一文件。与我们为 ngAnnotate 创建部分的方式相同,我们现在将为 concat 和 UglifyJS 执行相同的操作。与 ngAnnotate 一样,这两个任务都接受一个目标,在本例中为 js。可以将许多配置选项传递到这些任务中,但我们只是简单地指定 srcdest 以指向正确文件。正如您可能猜到的那样,这些插件将获取传递到 src 对象的文件内容,并将它们处理到 dest 后面指定的文件夹中。让我们尝试理解这里发生了什么。您可以通过在终端中运行 grunt concat 来测试这一点,它应该导致创建 ./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 插件发挥作用的地方。在使用 UglifyJS 时,我们希望 Grunt 完成压缩应用程序的最终过程。因此,我们要定位包含所有新拼接代码的文件,在本例中为 public/min/app.js。要测试这一点,请运行 grunt uglify,并查看您新压缩的文件。以下是此任务的相关配置:

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

在本课程中,我们分别使用了所有这些任务。现在,让我们使用之前创建的默认任务。它允许 Grunt 按注册顺序一个接一个地运行所有指定的任务。现在,只需在项目中运行 grunt,您的代码就会被注解、拼接和压缩。

结论

我希望通过本简短教程,您能够很好地理解数组表示法,以及为什么它对于使 AngularJS 应用压缩安全至关重要。如果您是 Grunt 新手,我强烈建议您尝试使用这些插件以及其他插件,因为它们可以节省大量时间。与往常一样,请随时在下方发表评论,或者如果有什么问题,请通过我的个人资料中的地址给我发送电子邮件。

关于使用 Grunt 进行压缩安全的 Angular 代码的常见问题解答 (FAQ)

(此处应包含与原文中相同的FAQ部分,但语言更流畅自然)

以上是5分钟到最小的角度代码与咕unt声的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。