Grunt Automate Code Stitching 및 압축과 같은 작업 러너는 개발 중 페이지 속도를 최적화합니다. Grunt 플러그인은 AngularJS 응용 프로그램을 안전하게 압축 할 수 있도록합니다.
기본적으로 AngularJS 응용 프로그램은 압축 할 수 없으며 Array Syntax로 작성해야합니다. uglifyjs가 실행될 때 매개 변수의 이름을 바꾸지 만 배열에 DI 주석이 존재하면 이름이 바뀌지 않아 이름이 바뀌는 매개 변수가 여전히 필요한 종속성에 액세스 할 수 있습니다.
위에서 언급 한 바와 같이, 배열 표기법은 DI 주석으로 시작하여 코드 압축을 안전하게 만드는 데 중요한 역할을합니다. uglifyjs가 실행되면 각각
및 $scope 및 $http 및 a의 매개 변수를 이름을 바꿉니다. 배열로 문자열로 전달 된 di 주석의 존재는 이름이 바뀌지 못하게합니다. 따라서이 이름이 바뀌는 매개 변수는 여전히 필요한 종속성에 액세스 할 수 있습니다. 이러한 주석이 존재하지 않으면 코드가 중단됩니다. 보시다시피, 이런 식으로 수동으로 코드를 작성하는 것은 매우 비효율적입니다. 이를 피하기 위해 이제 AngularJS 응용 프로그램을 Grunt를 사용하여 완전히 최적화 된 방식으로 주석, 스플 라이스 및 압축하는 방법을 보여주고 생산을 준비하는 방법을 보여 드리겠습니다. b
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 grunt-contrib-uglify 객체는 Grunt Wrapper 함수의 맨 위에서 시작하여 다음 예제에서 3 행에서 5 행으로 확장되지만 곧 대부분의 코드가 포함됩니다. grunt-ng-annotate <🎜 🎜>"package.json"파일을 읽도록 Grunt를 구성한 후 Grunt가 액세스 할 수 있도록 플러그인을로드해야합니다. 이것은 플러그인 이름을 문자열로 로 전달하여 수행됩니다. 이 플러그인이 래퍼 함수 <🎜 🎜> 내부에로드되었지만 <🎜 🎜> 객체 외부에 있는지 확인하십시오. 이러한 조건이 충족되지 않으면 Grunt는 제대로 작동하지 않습니다. 다음에해야 할 일은 Grunt가 특정 대상없이 호출 될 때 수행 될 기본 작업을 작성하는 것입니다. 구성에 따라 실행되므로 이러한 작업이 추가되는 순서에주의해야합니다. 여기에서 Ngannotate는 먼저 실행되도록 구성된 다음 CONCAT 및 UGLIFYJS로 구성되어 있으며 코드를 구축하는 가장 좋은 방법이라고 생각합니다. 또한 플러그인이로드 된 후에 grunt.loadNpmTask()를 배치해야한다는 것을 기억하는 것이 중요합니다. 방금 논의한 내용을 바탕으로 Gruntfile.js는 다음과 같아야합니다.
<🎜 🎜> <<> 3 단계-플러그인 구성 <🎜 🎜>
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);
});
}
};
}]);및 를 지정합니다. 추측 할 수 있듯이이 플러그인은 파일 내용을 객체로 전달하여 <🎜 🎜> 다음에 지정된 폴더로 처리합니다. 여기서 무슨 일이 일어나고 있는지 이해해 보자. 터미널에서
를 실행하여 이것을 테스트 할 수 있으므로 <🎜 🎜>가 생성됩니다.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는 모든 지정된 작업을 하나씩 등록 순서로 실행할 수 있습니다. 이제 프로젝트에서 <<>를 실행하면 코드가 주석이 달리고, 접합되고 압축됩니다. 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);
});
}
};
}); faq (FAQ) grunt가있는 압축-안전 각도 코드의 FAQ
위 내용은 Grunt와 함께 최소 안전 각도 코드까지 5 분의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
