Doing multiple things with a Gulp Task - gulp

Question

I'm attempting to integrate Gulp into a project I'm working on. Everytime that I think I understand it, I run into a scenario where I'm total confused.
Basically, I'm trying to generate two files and copy another file. Currently, I have the following:
var input = {
file1: [
'src/library/**/*.js'
],
file2: [
'src/children/**/*.html'
]
file3: [
'src/index.html'
]
};
var output = {
dir: './dist',
file1 : 'app.js',
file2: 'app.html'
}
gulp.task('myTask', function() {
var stream1 = gulp.src(input.file1)
.pipe(concat(output.file1))
.pipe(gulp.dest('dist'))
;
var stream2 = gulp.src(input.file2)
.pipe(concat(output.file2))
.pipe(gulp.dest('dist'))
;
var stream3 = gulp.src(input.file3)
.pipe(gulp.dest('dist')
;
});
At this point, I understand that I basically have three streams. If I had a single stream, I would just do something like:
return gulp.src(input.file1)
...
.pipe(gulp.dest('dist'))
;
Clearly, that approach won't work. Yet, I cannot have my process move on until all three of my items happen. How do I resolve this in the gulp world?

Answer 1

It sounds like you have some clearly defined tasks:
Concatenate library JavaScript files.
Concatenate source files.
Copy index.html to the distribution directory.
Why not make each task it's own individual task?
For example:
gulp.task('concat:libs', function() {
return gulp.src(input.file1)
.pipe(concat(output.file1))
.pipe(gulp.dest('dist'));
});
gulp.task('concat:src', function(){
return gulp.src(input.file2)
.pipe(concat(output.file2))
.pipe(gulp.dest('dist'));
});
gulp.task('copy', function(){
return gulp.src(input.file3)
.pipe(gulp.dest('dist');
});
Then you can simply create a fourth task that depends on the other three:
gulp.task('myTask', ['concat:libs', 'concat:src', 'copy']);
The array in myTask's declaration indicate dependencies on the other three tasks, and gulp will execute those three tasks before executing myTask.
For more information see: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname-deps-fn