网页代码宽度最小代码_5分钟到最小安全角度代码

网页代码宽度最小代码

毫无疑问，优化页面速度是任何开发Web应用程序的开发人员的主要重点。 任务运行者（例如Grunt）可以在开发过程中发挥关键作用，因为它们可以自动执行代码串联和压缩的活动，这将是本教程的主要主题。 具体来说，我们将使用一组Grunt插件，以确保我们的AngularJS应用程序可安全进行缩小。 在开始讨论AngularJS和minification之前，我想强调一点，所有技能水平的开发人员都可以从本教程中受益，但是需要具备Grunt的基本知识。 在本文中，我们将使用Grunt生成新文件夹，因此那些使用任务运行程序的新手可以很好地了解其工作方式。

最小化角度应用程序的问题

默认情况下，AngularJS应用程序不是最低安全的。 它们必须使用数组语法编写。 如果您对数组的语法到底是什么感到困惑，请不要担心，您可能已经编写了使用它的代码。 让我们看两个传递$scope和$http参数的AngularJS控制器的例子。

在下面的第一个示例中，模块的工厂和控制器包装在以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注释开头，DI注释在使此代码成为最小安全性方面起着关键作用。 当UglifyJS运行时，它将把我们的参数分别从$scope和$http重命名为a和b 。 DI批注的存在以字符串形式传递到数组中，阻止它们被重命名。 因此，这些重命名的参数仍然可以访问必要的依赖项。

如果这些注释不存在，则代码将中断。 如您所见，以这种方式手动编写代码效率极低。 为了帮助您避免这种情况，我现在将展示如何使用Grunt对AngularJS应用程序进行注释，连接和最小化，以使其在最小化方面得到充分优化，并可以在生产中使用。

使用咕unt声

该项目的整个存储库，包括我们将要定位的文件，都可以在GitHub上找到 。 对于那些习惯使用Grunt的人，可以随时进行后续操作并创建自己的构建，或将此代码添加到现有项目中。 如果您在空目录下工作，则必须确保目录中有一个“ package.json”文件。 可以通过运行命令npm init来创建此文件。

一旦您的项目中包含“ package.json”文件，就可以通过运行以下命令来下载插件：

npm install grunt-contrib-concat grunt-contrib-uglify grunt-ng-annotate --save-dev

这会将Grunt以及我们将要使用的三个插件安装到您的项目中：

• grunt-contrib-concat
• 咕-作tri
• grunt-ng-annotate

尽管可以在不使用Grunt的情况下使用ng-annotate ，但是您很快就会看到Grunt如何无缝地进行代码的注释，连接和最小化。 它提供了一个简单而有效的解决方案来最小化AngularJS代码。 如果您从头开始关注此项目，则应在项目的根目录中包含一个Gruntfile.js，它将保存所有Grunt代码。 如果尚未创建，请立即创建。

最低安全代码的三个步骤

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

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

module.exports = function(grunt) {
    //grunt wrapper function 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
          //grunt task configuration will go here     
    });
}

步骤2 –加载和注册Grunt任务

配置Grunt读取我们的“ package.json”文件后，需要加载插件，以便Grunt可以访问它们。 这是通过将插件名称作为字符串传递到grunt.loadNpmTask()来完成的。 确保将这些插件加载到包装函数内部 ，而不是配置对象外部 ，这一点很重要。 如果不满足这些条件，Grunt将无法正常工作。

我们需要做的下一步是创建一个默认任务，该任务将在调用Grunt且没有特定目标时执行。 您应注意这些任务的添加顺序，因为它们将根据其配置运行。 在这里，将ngAnnotate配置为先运行，然后再运行concat和UglifyJS，我认为这是构建代码的最佳方法。 此外，重要的是要记住，必须在插件加载后放置grunt.registerTask() 。

根据我们刚刚讨论的内容，Gruntfile.js应该如下所示：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
          //grunt task configuration will go here     
    });

    //load grunt tasks
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-ng-annotate'); 

    //register grunt default task
    grunt.registerTask('default', ['ngAnnotate', 'concat', 'uglify']);
}

第3步–配置插件

ngAnnotate

现在我们的Gruntfile已经准备就绪，让我们再回到config对象中，并为ngAnnotate插件指定要定位的文件。 为此，我们必须首先为ngAnnotate创建一个节并创建一个目标，在这种情况下，该目标称为spApp 。 在此目标内，您将指定要将DI批注添加到的文件，以及应将其生成到的文件夹。 在此示例中，Grunt将采用public/js指定的三个文件，并将它们生成到名为public/min-safe的新文件夹中。

一旦配置完成，就可以运行grunt ngAnnotate并查看代码是如何生成的。 此外，您可以访问GitHub页面，查看grunt-ng-annotate ，并查看它可以指定的其他选项。

ngAnnotate: {
    options: {
        singleQuotes: true
    },
    app: {
        files: {
            './public/min-safe/js/appFactory.js': ['./public/js/appFactory.js'],
            './public/min-safe/js/FormController.js': ['./public/js/FormController.js'],
            './public/min-safe/app.js': ['./public/js/app.js']
        }
    }
}

级联

现在，您已经生成了一个文件夹，其中充满了新注释的AngularJS代码，让我们将这些代码编译或串联到一个文件中来进行操作。 就像我们为ngAnnotate创建一个部分ngAnnotate ，我们现在将对concat和UglifyJS做同样的事情。 就像ngAnnotate一样，这两个任务都有一个目标，在本例中为js 。 可以将许多配置选项传递给这些任务，但是我们只是要指定src和dest指向正确的文件。 您可能已经猜到了，这些插件将把传递到src对象中的文件内容，并处理到dest之后指定的文件夹中。

让我们尝试了解这里发生了什么。 您可以通过在终端中简单运行grunt concat来进行测试，这将导致创建./public/min/app.js 。

concat: {
    js: { //target
        src: ['./public/min-safe/app.js', './public/min-safe/js/*.js'],
        dest: './public/min/app.js'
    }
}

缩小

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

我们需要做的最后一件事是通过减少代码中的无用空间。 这是UglifyJS插件发挥作用的地方。 使用UglifyJS时，我们希望Grunt完成缩小应用程序的最终过程。 因此，我们想要定位包含所有新串联代码的文件，在本例中为public/min/app.js 要测试这一点，请运行grunt uglify ，然后看看您的新产品。

这是此任务的相对配置：

uglify: {
    js: { //target
        src: ['./public/min/app.js'],
        dest: './public/min/app.js'
    }
}

在本课程中，我们分别使用了所有这些任务。 现在，让我们使用之前创建的默认任务。 它允许Grunt按照注册的顺序依次运行所有指定的任务。 现在，只需在项目内部运行grunt ，即可对代码进行注释，连接和最小化。

结论

我希望由于这篇简短的教程，您对数组符号有了很好的理解，以及为什么它对于使AngularJS应用程序具有最小安全性至关重要。 如果您不熟悉Grunt，我强烈建议您同时使用这些插件和其他插件，因为它们可以为您节省大量时间。 与往常一样，如果您有任何疑问，请随时在下面评论，或在我的简历中给我发送电子邮件。

翻译自: https://www.sitepoint.com/5-minutes-to-min-safe-angular-code-with-grunt/

网页代码宽度最小代码