GulpJS: Angular Dependency Injection

Standard

Angular Dependency Injection

  • Use gulp-ng-annotate in order to provide automatic security blanket because manglin your code can break angular dependency injection
  • gulp-ng-annotate looks for dependency injection and adds angular injection
  • Use ** /* @ngInject / * annotation on top of controller, services, anonymous function etc to resolve dependency injection if forget to use Strict Dependency Injection (ng-strict-di) or $inject Property Annotation.
  • @ngInject provide code hint for gulp-ng-annotate to add angular injections
  • Avoid implementing @ngInject for third party libraries

Pre Install:

    npm install --save-dev gulp gulp-load-plugins

Install:

    npm install --save-dev gulp-ng-annotate

Code:

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var assets = $.useref.assets({ searchPath:  './' });
    var cssFilter = $.filter('**/*.css');
    var jsLibFilter = $.filter('**/' + config.optimized.lib);
    var jsAppFilter = $.filter('**/' + config.optimized.app);

    gulp.task('di', function () {

        return gulp
        .src('./build/index.html')
        .pipe(assets)
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe(jsLibFilter)
        .pipe($.uglify())
        .pipe(jsLibFilter.restore())
        .pipe(jsAppFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify())
        .pipe(jsAppFilter.restore())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest('./build/'));
    });

Execute:

    gulp di
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s