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');
    }
  • 相关阅读:
    PHP解决imagecopymerge合成图片后黑色边角的问题
    cmake简单介绍
    python pytest测试框架介绍七 ---测试用例显示用例注释名称
    docker day001
    C语言 字节数组和hex和互相转换
    glsl 内置数学函数
    springboot分析——自定义启动类
    springboot源码分析——自动配置流程
    springboot源码分析——SPI扩展机制
    springboot分析——与其他组件的整合(JPA规范/atomikos/redis)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4104818.html
Copyright © 2011-2022 走看看