Grunt와 함께 최소 안전 각도 코드까지 5 분

웹 성능 최적화는 모든 웹 애플리케이션 개발자가주의를 기울이는 주요 문제입니다. Grunt와 같은 작업 러너는 개발 프로세스에서 주요 역할을 수행합니다. 코드 스티칭 및 압축과 같은 작업을 자동화합니다. AngularJS 애플리케이션을 안전하게 압축 할 수 있도록 다양한 Grunt 플러그인을 사용합니다. AngularJS 및 압축에 대해 논의하기 전에 모든 기술 수준의 개발자 가이 자습서의 혜택을받을 수 있지만 Grunt의 기본 사항을 갖는 것이 좋습니다. 이 기사에서는 Grunt를 사용하여 새로운 폴더를 생성하므로 Grunt 초보자도 작동 방식을 잘 이해할 수 있습니다.

키 포인트

Grunt Automate Code Stitching 및 압축과 같은 작업 러너는 개발 중 페이지 속도를 최적화합니다. Grunt 플러그인은 AngularJS 응용 프로그램을 안전하게 압축 할 수 있도록합니다. 기본적으로 AngularJS 응용 프로그램은 압축 할 수 없으며 Array Syntax로 작성해야합니다. uglifyjs가 실행될 때 매개 변수의 이름을 바꾸지 만 배열에 DI 주석이 존재하면 이름이 바뀌지 않아 이름이 바뀌는 매개 변수가 여전히 필요한 종속성에 액세스 할 수 있습니다. Grunt는 AngularJS 응용 프로그램의 주석, 접합 및 압축 프로세스를 자동화하는 데 사용될 수 있습니다. 필요한 플러그인을 설치하고 "package.json"파일을 읽도록 Grunt를 구성하면 작업이로드되어 등록됩니다. 그런 다음 플러그인을 구성하여 특정 파일을 찾으십시오.

Grunt는 오류를 캡처하고 방지하는 작업을 자동화하여 안전한 각도 코드를 작성하는 데 도움이됩니다. 파일이 저장 될 때마다 코드에서 단위 테스트를 실행할 수 있으며 즉시 개발자에게 오류 경고를 보냅니다. 자동화는 시간을 절약하고 중요한 작업이 무시되지 않도록합니다.

• 각도 응용 압축 문제
• articlejs 응용 프로그램은 기본적으로 압축성 안전하지 않습니다. 배열 구문으로 작성해야합니다. 배열 구문이 무엇인지 잘 모르겠다면 아마도 그것을 사용하기 위해 코드를 작성했을 것입니다. AngularJS 컨트롤러의 및
매개 변수를 전달하는 두 가지 예를 살펴 보겠습니다. 아래의 첫 번째 예에서, 모듈의 공장 및 컨트롤러는 DI 주석으로 시작하는 어레이로 싸여 있습니다.
다음 예에서 모듈 코드는 여전히 압축성 안전하지 않지만 코드는 이전 코드보다 짧습니다. 그것은 단지 서비스의 이름을 지정 한 다음 필요한 종속성을 기능에 전달하여 먼저 문자열로 쓰지 않고 매개 변수로 전달합니다. 압축이없는 한이 코드는 정상적으로 실행됩니다. 따라서 AngularJS 코드를 작성할 때 사람들이 종종이 구문을 선택하는 이유를 쉽게 이해할 수 있습니다.
이제이 두 코드 사이의 물리적 차이를 이해 했으므로이 구문이 압축에 적합하지 않은 이유를 신속하게 설명 할 것입니다.

배열 표기법의 작동 방식

위에서 언급 한 바와 같이, 배열 표기법은 DI 주석으로 시작하여 코드 압축을 안전하게 만드는 데 중요한 역할을합니다. uglifyjs가 실행되면 각각

및 $scope 및 $http 및 a의 매개 변수를 이름을 바꿉니다. 배열로 문자열로 전달 된 di 주석의 존재는 이름이 바뀌지 못하게합니다. 따라서이 이름이 바뀌는 매개 변수는 여전히 필요한 종속성에 액세스 할 수 있습니다. 이러한 주석이 존재하지 않으면 코드가 중단됩니다. 보시다시피, 이런 식으로 수동으로 코드를 작성하는 것은 매우 비효율적입니다. 이를 피하기 위해 이제 AngularJS 응용 프로그램을 Grunt를 사용하여 완전히 최적화 된 방식으로 주석, 스플 라이스 및 압축하는 방법을 보여주고 생산을 준비하는 방법을 보여 드리겠습니다. b

grunt를 사용하십시오

프로젝트의 전체 저장소는 우리가 찾을 파일을 포함하여 GitHub에서 찾을 수 있습니다. Grunt를 사용하는 데 익숙한 사람들을 위해서는 자신의 빌드를 계속하고 만들거나 기존 프로젝트 에이 코드를 추가 할 수 있습니다. 빈 디렉토리를 사용하는 경우 디렉토리에 "package.json"파일이 있는지 확인해야합니다. 이 파일은 명령을 실행하여 생성 할 수 있습니다. 프로젝트에 "package.json"파일이 있으면 다음 명령을 실행하여 플러그인을 다운로드 할 수 있습니다. 이것은 프로젝트에 Grunt를 설치하고 우리가 사용할 세 가지 플러그인을 설치합니다.

npm init

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

ng-notate를 grunt없이 사용할 수 있지만, 매끄러운 그 런트가 코드를 주석, 접합 및 압축하는 과정을 어떻게 만드는지 곧 알게 될 것입니다. AngularJS 코드를 압축하기위한 간단하고 효과적인 솔루션을 제공합니다. 이 프로젝트를 처음부터 추적하는 경우 프로젝트 루트 디렉토리에 gruntfile.js가 있어야합니다. 여기에는 모든 grunt 코드가 포함됩니다. 당신이 아직하지 않았다면, 지금 만들어주세요.

• 압축-안전 코드를 생성하기위한 세 단계 grunt-contrib-concat
1 단계 - "package.json"파일을 읽도록 Grunt를 구성하십시오. 이전에 설치 한 플러그인에 액세스하려면 먼저 "package.json"파일의 내용을 읽으려면 GruntFile의
• 속성을 ​​구성해야합니다. grunt-contrib-uglify 객체는 Grunt Wrapper 함수의 맨 위에서 시작하여 다음 예제에서 3 행에서 5 행으로 확장되지만 곧 대부분의 코드가 포함됩니다.
• 2 단계 - grunt 작업을로드 및 등록 grunt-ng-annotate "package.json"파일을 읽도록 Grunt를 구성한 후 Grunt가 액세스 할 수 있도록 플러그인을로드해야합니다. 이것은 플러그인 이름을 문자열로

  로 전달하여 수행됩니다. 이 플러그인이 래퍼 함수 내부에로드되었지만 객체 외부에 있는지 확인하십시오. 이러한 조건이 충족되지 않으면 Grunt는 제대로 작동하지 않습니다. 다음에해야 할 일은 Grunt가 특정 대상없이 호출 될 때 수행 될 기본 작업을 작성하는 것입니다. 구성에 따라 실행되므로 이러한 작업이 추가되는 순서에주의해야합니다. 여기에서 Ngannotate는 먼저 실행되도록 구성된 다음 CONCAT 및 UGLIFYJS로 구성되어 있으며 코드를 구축하는 가장 좋은 방법이라고 생각합니다. 또한 플러그인이로드 된 후에 grunt.loadNpmTask()를 배치해야한다는 것을 기억하는 것이 중요합니다. 방금 논의한 내용을 바탕으로 Gruntfile.js는 다음과 같아야합니다. 3 단계-플러그인 구성 ngannotate 이제 gruntfile이 준비되었으므로 config 객체로 돌아가서 Ngannotate 플러그인을 찾을 파일을 지정하십시오. 이를 위해서는 먼저 Ngannotate를위한 부품을 만들고이 경우 라는 대상을 만들어야합니다. 이 대상에서는 DI 주석을 추가하려는 파일과 생성 해야하는 폴더를 지정합니다. 이 예에서 Grunt는 에 지정된 세 가지 파일을 가져와 라는 새 폴더로 생성합니다. 구성이 완료되면 를 실행하고 코드가 어떻게 생성되는지 확인할 수 있습니다. 또한 GRUNT-NG-ANNOTATE의 GitHub 페이지를 방문하여 지정할 수있는 다양한 옵션을 볼 수 있습니다. grunt.registerTask()

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

  스플릿 이제 새로운 주석이 포함 된 AngularJS 코드로 폴더를 생성 했으므로이 코드를 단일 파일로 컴파일하거나 접합하여 계속하겠습니다. 우리가 ngannotate 섹션을 만든 것과 마찬가지로, 우리는 이제 Concat and uglifyjs에 대해서도 동일하게 할 것입니다. Ngannotate와 마찬가지로 두 작업 모두 대상을 받아들입니다. 많은 구성 옵션을 이러한 작업에 전달할 수 있지만 올바른 파일을 가리키기 위해

  및 를 지정합니다. 추측 할 수 있듯이이 플러그인은 파일 내용을 객체로 전달하여 다음에 지정된 폴더로 처리합니다. 여기서 무슨 일이 일어나고 있는지 이해해 보자. 터미널에서

  를 실행하여 이것을 테스트 할 수 있으므로 가 생성됩니다.

  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가 응용 프로그램을 압축하는 최종 프로세스를 완료하려고합니다. 따라서 모든 새로운 스 플라이 싱 코드가 포함 된 파일을 찾아 를 찾으려고합니다. 이것을 테스트하려면 를 실행하고 새로 압축 된 파일을보십시오. 다음은이 작업에 대한 관련 구성입니다.

  이 과정에서는이 모든 작업을 개별적으로 사용했습니다. 이제 이전에 만든 기본 작업을 사용해 봅시다. Grunt는 모든 지정된 작업을 하나씩 등록 순서로 실행할 수 있습니다. 이제 프로젝트에서 를 실행하면 코드가 주석이 달리고, 접합되고 압축됩니다. public/min/app.js 결론 grunt uglify

  이 짧은 튜토리얼을 사용하면 배열 표기법을 잘 이해할 수 있고 AngularJS 응용 프로그램 압축을 안전하게 만드는 것이 필수적인 이유를 알 수 있기를 바랍니다. Grunt를 처음 접한다면 많은 시간을 절약 할 수있는 플러그인과 다른 플러그인을 사용해 보는 것이 좋습니다. 항상 그렇듯이 아래에 의견을 보내 주시거나 질문이 있으시면 내 프로필의 주소로 이메일을 보내주십시오.

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

  faq (FAQ) grunt가있는 압축-안전 각도 코드의 FAQ

  (동일한 FAQ 부분은 원본 텍스트에서와 동일한 FAQ 부분을 포함시켜야하지만 언어는 더 부드럽고 자연 스럽습니다)

위 내용은 Grunt와 함께 최소 안전 각도 코드까지 5 분의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!