[Grunt + AngularJS] Using ng-annotate for Min-safe AngularJS

When you minify your code with a tool like uglify, the resulting minified file would rename variables. This was a problem for ANGUALRJS, which uses parameter names to provide injected dependencies. You could use the array notation manually, but no human shouldever has to suffer this fate, or do could use Ng -annotate with Grunt, and let your helper robots get the job done instead.

Without annotations:

Angular.module ("mymod"). Controller ("Myctrlfunction ($timeout) {});    

With annotations:

Angular.module ("mymod"). Controller ("Myctrl", ["$scope" $timeoutfunction ( $timeout) {}]);

The problem with uglify:

function ($scope, $timeout) {}); To:anuglar.module (thefunction(A, b) {});

It'll rename the injection, but anularjs don't know what's A and B, so it'll cause problem.

If we usse annotation first then ufligy the code:

After annotation:angular.module (function($scope, $timeout) {}]); After Uglify:angular.module (function(A, b) {}]);

Uglify would still rename the injectionm, but with annotation, angularjs know what A and B is, 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: {Comp Ress: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 directoryTemp: ' 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 ');}

[Grunt + AngularJS] Using ng-annotate for Min-safe AngularJS