Compressing Angular Modules with Gulp

Modules are very important for large applications.  For these I typically use require.js and compress it with r.js. However, since Angular has it’s own module system I prefer to use it, and for the compression part I use gulp tasks.

<script src="../vendor/angular/angular.js"></script>
<script src="../vendor/angular/angular-ui-router.js"></script>


<!-- build:all -->

<script src="../app/app.js"></script>
<script src="../app/controllers/childState1.js"></script>
<script src="../app/controllers/childState2.js"></script>
<script src="../app/controllers/form.js"></script>

<!-- endbuild -->

 

var concat = require('gulp-concat');
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
var ngAnnotate = require('gulp-ng-annotate');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');
var uglify = require('gulp-uglify');



gulp.task('compress-js', function() {
 gulp.src('./dist/debug/public/app/**/*.js')
 .pipe(ngAnnotate())
 .pipe(concat('modules.min.js'))
 .pipe(uglify())
 .pipe(gulp.dest('./dist/minified/public/app'));
});
 

gulp.task('replace-script-tags', function() {
 gulp.src('./dist/debug/public/app/application.html')
 .pipe(htmlreplace({
 'all': '../app/modules.min.js'
 }))
 .pipe(gulp.dest('./dist/minified/public/app'));
});

Leave a Reply