How to pipe to another task in Gulp?

Question

I try to DRY my gulpfile. There I have small duplication of code I not comfortable with. How can this be made better?

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

I got index as a separate task, since I need to watch src/index.html to livereload. But I'm also watching my .coffee sources and when they change, I need to update src/index.html as well.

How can I pipe to index in scripts?

Answer 1

gulp enables you to order a series of tasks based on arguments.

Example:

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

Try the following code, you will be running the task 'index' to run both tasks:

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

The task index will now require scripts to be finished before it runs the code inside it's function.

Answer 2

If you look into the Orchestrator source, particularly the .start() implementation you will see that if the last parameter is a function it will treat it as a callback.

I wrote this snippet for my own tasks:

  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" ));