gulpで複数のファイルコピーを同期的に行う

  • 2
    いいね
  • 0
    コメント

gulpでファイルをコピーするときに

gulp.task('copyFiles', () => {
    gulp.src('./src/a/**').pipe(gulp.dest("./dist"));
    gulp.src('./src/b/**').pipe(gulp.dest("./dist"));
    gulp.src('./src/c/**').pipe(gulp.dest("./dist"));
});

gulp.task('replace', ['copyFiles'], (){
    gulp.src('./src/a/index.html')
        .pipe(replace(/hoge/g, 'piyo'))
        .pipe(gulp.dest('./dist/a'));
});

みたいにやると、非同期的にコピーされてしまい、しかもcopyFilesが終わる前にreplaceが走ってしまい思った結果になりません。コピーが一つだけなら

gulp.task('copyFiles', () => {
    return gulp.src('./src/a/**').pipe(gulp.dest("./dist"));
});

gulp.task('copyFiles', (cb) => {
    gulp.src('./src/a/**').pipe(gulp.dest("./dist")).on('end'()=>{cb();});
});

のように出来ますが、複数のコピーを全部taskにしてつなげるのは流石に・・・・
で、gulpで同期的に何かをする方法は色々ありますが、generatorを使ってやってみたらこんな感じかなと。

gulp.task('copyFiles', (cb) => {
    var g = (function *(){
        yield gulp.src('./src/a/**').pipe(gulp.dest("./dist")).on('end',()=>{g.next();});
        yield gulp.src('./src/b/**').pipe(gulp.dest("./dist")).on('end',()=>{g.next();});
        yield gulp.src('./src/c/**').pipe(gulp.dest("./dist")).on('end',()=>{g.next();});
        yield cb();
    })();
    g.next();
});

gulp.task('replace', ['copyFiles'], (){
    gulp.src('./src/a/index.html')
        .pipe(replace(/hoge/g, 'piyo'))
        .pipe(gulp.dest('./dist/a'));
});