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

时间：2014-11-18 22:56:21 阅读：636 评论：0 收藏：0 [点我收藏+]

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:

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

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

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

原文：http://www.cnblogs.com/Answer1215/p/4104818.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)