Выполнение нескольких действий с помощью задачи Gulp

Question

Я пытаюсь интегрировать Gulp в проект, над которым я работаю. Каждый раз, когда я думаю, что я это понимаю, я сталкиваюсь с сценарием, в котором я совершенно смущен.

В принципе, я пытаюсь сгенерировать два файла и скопировать другой файл. В настоящее время у меня есть следующее:

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') 
    ; 
}); 

На данный момент я понимаю, что у меня в основном три потока. Если бы у меня был единственный поток, я бы просто сделал что-то вроде:

return gulp.src(input.file1) 
    ... 
    .pipe(gulp.dest('dist')) 
; 

Очевидно, что такой подход не будет работать. Тем не менее, я не могу заставить свой процесс двигаться до тех пор, пока все три моих предмета не произойдут. Как разрешить это в мире глотков?

Answer 1

Похоже, у вас есть четко определенные задачи:

1. Concatenate библиотека JavaScript файлы.
2. Исправить исходные файлы.
3. Скопируйте index.html в каталог распространения.

Почему бы не сделать каждую задачу отдельной задачей?

Например:

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'); 
}); 

Тогда вы можете просто создать четвертую задачу, которая зависит от трех других:

gulp.task('myTask', ['concat:libs', 'concat:src', 'copy']); 

Массив в декларации myTask указывают зависимость от трех других задач, и gulp выполнит эти три задачи перед выполнением myTask.

Для получения дополнительной информации см .: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname-deps-fn