Show DevBest Minifying Angular apps with Gulp

Adil

DevBest CEO
May 28, 2011
1,276
714
Code:
// Compile source via closure
gulp.task('compile', function () {
   gulp.src('static/js/app.min.js')
   .pipe(closureCompiler({
       compilerPath: 'third_party/compiler.jar',
       fileName: 'app.dist.js',
       compilation_level: 'ADVANCED_OPTIMIZATIONS', //this removes all dud code and renames variables aggressively
       compilerFlags: {
           externs : [
               'third_party/angular_extern.js', 'third_party/oauth2_extern.js' //externs for compilation
           ]
       }
   })).pipe(gulp.dest('static/js/'));
});


// Concatenate angular app into one file
gulp.task('concat', function() {
   return gulp.src('static/js/app/**/*.js').
   pipe(concat('app.min.js'))
   .pipe(gulp.dest('static/js'));
});


// Minify via ngmin - so closure is able to correctly compile the code
gulp.task('ngmin', function() {
   return gulp.src('static/js/app.min.js')
   .pipe(ngmin())
   .pipe(gulp.dest('static/js/'));
});


/*
 TODO
 JSHint
 AppEngine deployment (write own plugin for this)
 Better css minification
 Angular unit tests
*/
// run all js tasks with a message at the end
gulp.task('minjs', function() {
   runSequence('concat', 'ngmin', 'compile', function() {
       console.log('Compiled JavaScript via Angular.JS');
   });
});

It basically concatenates all my angular files, minifies them via ngmin, and then compiles them via closure (which is a pretty aggressive js compiler). This results in 328 lines (including whitespace) being trimmed down to 12.. which is pretty awesome!

(Links that you may find interesting)
ngmin:
Closure Compiler:
Gulp.js:
 

Users who are viewing this thread

Top