如何通过管道连接到Gulp中的另一个任务？

Question

我试着擦干我的牙龈。在那里，我有一些我不习惯的代码的小重复。怎样才能做得更好呢？

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.coffee')
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(coffee())
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(gulp.src('src/index.html'))  // this
    .pipe(includeSource())             // needs
    .pipe(gulp.dest('dist/'))          // DRY
});

gulp.task('index', function() {
  return gulp.src('src/index.html')
    .pipe(includeSource())
    .pipe(gulp.dest('dist/'))
});

我把index作为一个单独的任务，因为我需要看着src/index.html加载。但我也在关注我的.coffee源代码，当它们发生变化时，我也需要更新src/index.html。

如何在scripts中通过管道连接到index

Answer 1

gulp使您能够根据参数对一系列任务进行排序。

示例：

gulp.task('second', ['first'], function() {
   // this occurs after 'first' finishes
});

尝试以下代码，您将运行任务'index‘来运行这两个任务：

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.coffee')
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(coffee())
    .pipe(gulp.dest('dist/scripts/'));
});

gulp.task('index', ['scripts'], function() {
  return gulp.src('src/index.html')
    .pipe(includeSource())
    .pipe(gulp.dest('dist/'))
});

任务index现在需要scripts完成，然后才能运行其函数内部的代码。

Answer 2

如果您查看Orchestrator源代码，特别是.start()实现，您将看到如果最后一个参数是一个函数，它会将其视为回调。

我为自己的任务编写了以下代码片段：

  gulp.task( 'task1', () => console.log(a) )
  gulp.task( 'task2', () => console.log(a) )
  gulp.task( 'task3', () => console.log(a) )
  gulp.task( 'task4', () => console.log(a) )
  gulp.task( 'task5', () => console.log(a) )

  function runSequential( tasks ) {
    if( !tasks || tasks.length <= 0 ) return;

    const task = tasks[0];
    gulp.start( task, () => {
        console.log( `${task} finished` );
        runSequential( tasks.slice(1) );
    } );
  }
  gulp.task( "run-all", () => runSequential([ "task1", "task2", "task3", "task4", "task5" ));