Conditional gulp concat for multiple tasks

Question

I have a gulp task called assembly, which uses subtasks to move various parts of my source to the assembly 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)); }); 

Then I wanted to add 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)); }); 

It works great. The last thing I want to do is gulp -concat all the js files from these subtasks. I suppose I can use gulpif to return a thread from each task instead of switching to gulp.dest, but I still need to somehow conditionally start the task to combine these threads and concat.

Is there a better way to do this?

Answer 1

Instead of embedding everything in one build task, why not create a separate task for compile or build-prod . This will make your code much easier to maintain and less fragile.

You can reuse parts of tasks by encapsulating them in functions:

 function jsBaseTasks() { return gulp.src(config.inputs.app); } gulp.task('build', function() { jsBaseTasks().pipe(...); // etc } 

Or, if you have reusable code snippets, you can use lazypipe to create 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()); } 

In addition, I think it is a bad idea to have your manufacturing and development assemblies built in one place. At some point, you accidentally turn on the dev assembly.

I have a rather large gulpfile that does this if it helps to understand what I mean, but it looks like you have a lot of work in yours already.

Answer 2

You definitely need to divide your tasks into as many small modules as you can, and then adhere to the DRY principle where you can.

In your case. For example, you can only have a standard dev task that starts and starts you, and several watch tasks and general build tasks during development can be performed. If you want to deploy your code for release, you may have some kind of config option that determines which files you want to click for release. Along with this, you may have a release task that looks at the configuration file and then collects all the sources, processes, concats, uglifies, etc. that you need, and then displays them at the specified destination of the assembly.

Note: Now it’s much easier to adhere to the DRY principle with the latest version of gulp-watch , since now you can pass arrays as a callback function.

I have gulpfiles with which I would be more than happy to share with you if you need a hand.