gulp dependent tasks - browserify and a pre-browserify task

Question

I have the following gulpfile

And I'm using emberate, which takes a callback which is called when the generated file (client/.index.js in this case) has been written. Now the browserify task depends on that file, so it shouldn't run till after emberate finishes. But I get different results, sometimes it works and other times I get this:

Error: Cannot find module './client/.index.js' from '/Users/myuser/workspace/myproject'

from browserify (and yes, the file is not there yet).. I'm not sure what I'm doing wrong, I have done as the callback in my emberate task, and browserify task depends on emberate.. What am I missing?

Edit: found a small pattern, if I run it and it doesn't error, the next time I run gulp i get the error, but the next time I don't, so it's every other time o.O

If I run gulp emberate, that works great. Then if I run gulp browserify it runs the following:

[gulp] Using file /Users/myuser/workspace/myproject/gulpfile.js
[gulp] Working directory changed to /Users/myuser/workspace/myproject
[gulp] Running 'clean'...
[gulp] Finished 'clean' in 3.11 ms
[gulp] Running 'emberate'...
[gulp] Finished 'emberate' in 22 ms
[gulp] Running 'browserify'...
[gulp] Live reload server listening on: 35729

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Cannot find module './client/.index.js' from '/Users/myuser/workspace/myproject'
    at /Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:36:25
    at load (/Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:54:43)
    at /Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:60:22
    at /Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:16:47
    at Object.oncomplete (fs.js:107:15)

This latest version seems to work, but during a watch if files were changed, it doesn't clean up the client/.index.js file, but keeps adding to it o.O (although running gulp emberate with or without the clean dependency works just fine..).

Answer 1

You need to give gulp hints about how each task will complete. See https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support

In all of your tasks switch this:

gulp.task('name', function () {
  gulp.src(glob)
    .pipe(stuff());
});

to this:

gulp.task('name', function () {
  return gulp.src(glob)
    .pipe(stuff());
});

Note that your less task and your emberate don't currently do this

Answer 2

Looks like there was a bug in emberate, concerning templates when using one process, which gulp.watch was doing.

This is my final gulpfile.js:

  var path = require('path');
  var gulp = require('gulp');
  var less = require('gulp-less');
  var refresh = require('gulp-livereload');
  var clean = require('gulp-clean');
  var source = require('vinyl-source-stream');
  var emberate = require('emberate');
  var browserify = require('browserify');

  gulp.task('less', function () {
    return gulp.src('./client/styles/*.less')
      .pipe(less({
        paths: [
          path.join(__dirname, 'client', 'styles')
        ]
      }))
      .pipe(gulp.dest('./dist/styles'))
      .pipe(refresh());
  });

  gulp.task('clean', function () {
    return gulp.src('./client/.index.js', { read: false })
      .pipe(clean());
  });

  gulp.task('emberate', ['clean'], function () {
    return emberate('./client', { pods: true })
      .pipe(source('.index.js'))
      .pipe(gulp.dest('./client'));
  });

  gulp.task('browserify', ['emberate'], function () {
    return browserify('./client/.index.js')
      .bundle()
      //Pass desired output filename to vinyl-source-stream
      .pipe(source('application.js'))
      // Start piping stream to tasks!
      .pipe(gulp.dest('./dist/scripts/'))
      .pipe(refresh());
  });

  gulp.task('watch', function () {
    gulp.watch('./client/styles/*.less', ['less']);
    gulp.watch('./client/**/*.{js,hbs}', ['browserify']);
  });

 gulp.task('default', ['less', 'browserify', 'watch']);

Which works great :)