How to run two elixir tasks in sequence?

Question

Take a look at this code:

var elixir = require('laravel-elixir')
  gulp = require('gulp'),
  fs = require('fs');

gulp.task('t1', function() {
  return gulp.src('1/1.js')
    .pipe(gulp.dest('2'));
});

gulp.task('t2', function() {
  // setTimeout(function() {
    console.log(fs.existsSync('2/1.js'));
  // }, 100);
  return gulp.src('2/1.js')
    .pipe(gulp.dest('3'));
});

elixir(function(mix) {
    mix.task('t1').task('t2');
});

When I uncomment setTimeout, console.log starts outputting true. Which supposedly means, that second task start when the first one hasn't finished. Is there a way to make them run one after another?

What I'm really trying to do is to browserify my js files, append some other files to them (custom task) and version the result. But versioning fails, because the file isn't there yet.

P.S. Before running gulp do mkdir 1 && touch 1/1.js. And do rm {2,3}/1.js before each run.

Answer 1

The issue here is that laravel-elixir wraps this sort of tasks in ones generated dynamically. The wrappers are executed in sequence. But they appear to not wait until the subtasks are finished.

So, the best I could come up with is this:

var elixir = require('laravel-elixir');
var gulp = require('gulp');
var fs = require('fs');

elixir.extend('inlineTask', function(func, watcher) {
  var task = new elixir.Task(func.name, func);
  if (watcher) {
    task.watch(watcher);
  }
});

elixir(function(mix) {
  mix.inlineTask(function t1() {
    console.log('1 -> 2');
    return gulp.src('1/1.js')
      .pipe(gulp.dest('2'));
  }, '1/**/*.js').inlineTask(function t2() {
    console.log('2 -> 3');
    console.log(fs.existsSync('2/1.js'));
    return gulp.src('2/1.js')
      .pipe(gulp.dest('3'));
  }, '2/**/*.js');
});