Conditional gulp concat on multiple tasks

Question

I have a gulp task called build that uses sub-tasks to move various parts of my source to a build folder:

gulp.task('build', ['jshint', 'templates', 'app', 'components', 'stylesheets', 'assets', 'index']);

gulp.task('app', ['clean-app'], function(){
    return gulp.src(config.inputs.app)
        .pipe(gulp.dest(config.outputs.root));
});

I then wanted to add some extra steps when --env=prod, which I did with gulp-if:

gulp.task('app', ['clean-app'], function(){
    return gulp.src(config.inputs.app)
        **.pipe(gulpif(env === 'prod', uglify()))**
        .pipe(gulp.dest(config.outputs.root));
});

This works fine. The final thing I want to do is to gulp-concat all the js files from those sub-tasks. I figure that I can use gulpif to return a stream from each task instead of going to gulp.dest, but I would still need to somehow conditionally run a task to combine those streams and concat.

Is there a better way to do this?

Answer 1

Rather than shove everything into one build task, why not have a separate task for compile or build-prod. This would make your code much easier to maintain, and less fragile.

You can still reuse parts of tasks, either by encapsulating those in functions:

function jsBaseTasks() {
    return gulp.src(config.inputs.app);
}

gulp.task('build', function() { jsBaseTasks().pipe(...); // etc }

Or, if you have chunks of reusable code, you can use lazypipe to build those up and use them as needed:

var jsProcess = lazypipe()
                    .pipe(jshint, jshintOptions)
                    .pipe(/* other gulp plugin */);

gulp.task('build', function() { gulp.src(...).pipe(jsProcess()).pipe(gulp.dest()); }

Also, I think it's a bad idea to have your production and development builds build to the same location. You are going to accidentally deploy the dev build at some point.

I have a rather big gulpfile that does this, if that helps to see what I mean, but it sounds like you've got a lot of work in yours already.