Conditional Build Tasks with gulp-if

I'm a bit of a Gulp novice. However, I've found it quite easy to create a smooth build process for my apps. Until today, I was using a process that would call a specific task to then run a series of other tasks.

Bad Build Process

For example, I had a "build-debug" wrapper task to handle building my project with no minification and no obfuscation of JavaScript or CSS. Then, I had a "build-production" wrapper to with build tasks that minified and obfuscated CSS and JavaScript. Basically, I was doing something like this:

gulp.task('app-js-debug', function() {
    return gulp.src([
            'src/app/app.js',
            'src/app/**/*.js'
        ])
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('app.js'))
        .pipe(ngAnnotate())
        .pipe(gulp.dest('www/js/'));
});

gulp.task('app-js-production', function() {
    return gulp.src([
            'src/app/app.js',
            'src/app/**/*.js'
        ])
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('app.js'))
        .pipe(ngAnnotate())
        .piple(uglify())
        .pipe(gulp.dest('www/js/'));
});


gulp.task('build-debug', ['clean-www'], function() {
    gulp.start('sass', 'app-js-debug', '.....');
});

gulp.task('build-production', ['clean-www'], function() {
    gulp.start('sass', 'app-js-production, '.....');
});

I would kick of the process with:

gulp build-debug

Or

gulp build-production

As you can see, I was duplicating the app-js-XXX code simply to have one additional task in the build process.

Good Build Process

Today, I decided to get rid of that. Initially, I was going to create my own method for this. Then, I discovered gulp-if by Rob Richardson.

Gulp-if lets you conditionally apply tasks. Now my process is like this:

var compact = args.compact || false;
compact = (compact === 'true') ? true : false;

gulp.task('app-js', function() {
    return gulp.src([
            'src/app/app.js',
            'src/app/**/*.js'
        ])
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('app.js'))
        .pipe(ngAnnotate())
        // Only uglify if "compact" is true
        .pipe(gulpif(compact, uglify()))
        .pipe(gulp.dest('www/js/'));
});


gulp.task('default', ['clean-www'], function() {
    gulp.start('sass', 'app-js', '.....');
});

Then, I can simply kick off the build with:

Minimized & Uglified

gulp --compact true

or

Raw code without minification

gulp 

More Better

Of course, this only demonstrates gulp-if on JavaScript. You can do the same to minify your CSS, HTML, or apply a conditional task in many other scenarios.