[Grunt + AngularJS] Using ng-annotate for min-safe AngularJS
2014-11-18 17:47
561 查看
When you minify your code with a tool like Uglify, the resulting minified file will rename variables. This is a problem for AngualrJS, which uses parameter names to provide injected dependencies. You could use the array notation manually, but no human should ever have to suffer this fate, or you could use ng-annotate with Grunt, and let your helper robots get the job done instead.
Without annotations:
With annotations:
The problem with Uglify:
It will rename the injection, but AnularJS Don't know what is a and b, so it will cause problem.
If we usse annotation first then ufligy the code:
Uglify will still rename the injectionm, but with annotation, angularjs know what a and b are, so won't cause problem.
Install:
Read More: https://www.npmjs.org/package/grunt-ng-annotate
Code:
Without annotations:
angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) { });
With annotations:
angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) { }]);
The problem with Uglify:
angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) { });
to:
anuglar.module("MyMode").controller("MyCtrl", function(a,b){});
It will rename the injection, but AnularJS Don't know what is a and b, so it will cause problem.
If we usse annotation first then ufligy the code:
After annotation:
angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) { }]);After Uglify:
angular.module("MyMod").controller("MyCtrl", ["$scope","$timeout", function(a,b){
}]);
Uglify will still rename the injectionm, but with annotation, angularjs know what a and b are, so won't cause problem.
Install:
npm install grunt-ng-annotate --save-dev
Read More: https://www.npmjs.org/package/grunt-ng-annotate
Code:
/** * Created by Answer1215 on 11/16/2014. */ module.exports = function(grunt) { grunt.initConfig({ stylus:{ compile:{ options: { compress: false }, files: { "app/css/app.css": "styl/app.styl" } } }, watch:{ stylus:{ files: ['styl/**/*.styl'], tasks: ['stylus:compile'] }, css:{ options: {livereload: true}, files: ['app/css/**.css'] }, html:{ options: {livereload: true}, files: ['**.html'] }, script: { options: {livereload: true}, files: ['app/js/**.js'] } }, concat:{ options: { separator: ';' }, js:{ src: ['bower_components/angular/angular.min.js', 'build/temp/app.js', 'build/temp/**.js'], dest: "build/app.js" } }, uglify: { js: { src: ["build/app.js"], dest: "build/app.min.js" } }, clean: { build: 'build', //clean the build directory temp: 'build/temp' }, ngAnnotate:{ options: { // Task-specific options go here. singleQuotes: true }, app:{ files: { // Target-specific file lists and/or options go here. 'build/temp/app.js': ['app/js/app.js'], 'build/temp/one.js': ['app/js/one.js'], 'build/temp/two.js': ['app/js/two.js'] } } } }); grunt.registerTask('build', ['clean:build', 'ngAnnotate', 'concat', 'uglify','clean:temp']); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-stylus'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-ng-annotate'); }
相关文章推荐
- [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
- ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS
- grunt+requirejs+angularjs 简单运用
- 发现个很有意思的angularjs +grunt 复习项目
- grunt等工具uglify angularjs 控制器注入失败的问题
- angularjs ngdocs 使用grunt生成api文档说明
- ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS
- angularjs grunt uglify 报错
- grunt\angularjs
- Angularjs Nodejs Grunt 一个例子
- 前端构建利器:AngularJS + Bower + Grunt
- Code Organization in Large AngularJS and JavaScript Applications(waititng for translate)
- Angularjs Controller 间通信机制 推荐
- Pros and Cons of Angularjs
- angularJS开发指南(angularJS developer guide) 之二
- 代码应用jFinal+AngularJs未来javaEE开发的趋势——程序员的福音
- Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
- angularJS开发指南(angularJS developer guide) 之三 核心编程
- 用Grunt.js管理你的项目
- 使用Grunt.js管理你项目的应用说明