zoukankan      html  css  js  c++  java
  • [Grunt + AngularJS] Using ng-annotate for min-safe AngularJS

    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

    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');
    }
  • 相关阅读:
    为什么我要用 Node.js? 案例逐一介绍
    不用 Twitter Bootstrap 的5个理由
    20个最强的基于浏览器的在线代码编辑器
    你需要了解 Windows Phone 8.1 的11件事
    你知道吗?什么是 Responsive JavaScript ?
    2014年最佳的10款 PHP 开发框架
    你知道吗?10个精妙的 Java 编码最佳实践
    知识笔记:jQuery 事件对象属性小结
    你知道吗?undefined 与 null 的区别
    Java开发者应该列入年度计划的5件事
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4104818.html
Copyright © 2011-2022 走看看