Gulp使用ng-annotate

作者

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2016/05/21/gulp-with-ng-annotate/

Angular中声明注入依赖的方法有三种

  1. 数组注解
  2. $inject属性
  3. 隐式注释

隐式注释虽然简单，但是在压缩代码的时候会出错，所以一般还是需要选用方法一或者方法二。

样例如下：

module.controller('controller', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);
var controller = function($scope, greeter) {
  // ...
}
controller .$inject = ['$scope', 'greeter'];
module.controller('controller ', controller );

ng-annotate是专门处理这种情况的插件，因为对于注入的处理毕竟是为了程序运行，而不是开发逻辑需要，这种自动化交给插件比较快。

安装插件以后只需要加一个@ngInject就行了。

/* @ngInject */
function Avengers(storageService, avengerService) {
    var vm = this;
    vm.heroSearch = '';
    vm.storeHero = storeHero;


    function storeHero() {
        var hero = avengerService.find(vm.heroSearch);
        storageService.save(hero.name, hero);
    }
}

ng-annotate会采用方案二生成需要的东西。

Gulp配置样例如下：

gulp.task('js', ['jshint'], function() {
    var source = pkg.paths.js;
    return gulp.src(source)
        .pipe(sourcemaps.init())
        .pipe(concat('all.min.js', {newLine: ';'}))
        .pipe(ngAnnotate({
            add: true
        }))
        .pipe(bytediff.start())
        .pipe(uglify({mangle: true}))
        .pipe(bytediff.stop())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(pkg.paths.dev));
});

参考文档：

https://docs.angularjs.org/guide/di

http://bguiz.github.io/js-standards/angularjs/minification-and-annotation/

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2016/05/21/gulp-with-ng-annotate/

发表评论