gulp-ng-annotate - how to use it?

Question

I want to minify my big angular project.

Using angular 1.5.0.

I'm trying to use the module gulp-ng-annotate to do so.

var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');

gulp.task('default', function () {
return gulp.src('../www-myalcoholist-com-angular/model/app.js')
    .pipe(ngAnnotate())
    .pipe(gulp.dest('dist'));
});

when I execute this nodejs script, it fails silently. or... welll.. it doesn't do anything.

i gave it only the main app.js file as a parameter. can I some how give it the all project ?

when I run ng-annotate from terminal, it added annotations properly to my project.. well.. i hope :)

so why this script fails?

I'm new to gulp so any information would be greatly appreciated.

Answer 1

gulp-ng-annotate does not try to find other files in your application. You'll need to either concat your application into a single app.js file before piping to gulp-ng-annotate or src all files separately and pass them to`gulp-ng-annotate.

E.g. the concat method:

var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var concat = require('gulp-concat');

gulp.task('default', function () {
 return gulp.src('../www-myalcoholist-com-angular/model/**/*.js')
    .pipe(concat('app.js'))
    .pipe(ngAnnotate())
    .pipe(gulp.dest('dist'));
});

Answer 2

A sample configuration -

gulp.task('app', function() {
    return gulp.src([
       // './bower_components/angular/angular.min.js',
       // './bower_components/angular-sanitize/angular-sanitize.min.js',
       //'./bower_components/angular-ui-select/dist/select.min.js',
       // './bower_components/angular-ui-router/release/angular-ui-router.min.js',
        './components/**/*.js'])
        .pipe(plumber())
        .pipe(count('## js-files selected'))
        .pipe(concat('./app/all.min.js', {newLine: ';'}))
        .pipe(ngAnnotate({
            // true helps add where @ngInject is not used. It infers.
            // Doesn't work with resolve, so we must be explicit there
            add: true
        }))
        .pipe(gulp.dest('./dist'));
});

This will produce a concatenated build js file. I have kept the vendor js files separate but you can have it any way you like.

P.S - Any other task e.g Linting is done separately in conjunction with watch task.