CODEWITHSUNDEEP
gulp
JQuery Mobile
JQuery Mobile

Reputation: 6291

Doing multiple things with a Gulp Task

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?

Upvotes: 3

Views: 2002

Answers (1)

pieceOpiland
pieceOpiland

Reputation: 359

It sounds like you have some clearly defined tasks:

  1. Concatenate library JavaScript files.
  2. Concatenate source files.
  3. 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

Upvotes: 4

Related Questions