gulp.watch() not running subsequent task

Question

Running into a bizarre bug when trying to make modular gulp tasks by splitting them into separate files. The following should execute the task css, but does not:

File: watch.js

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

gulp.task('watch', function () {
  plugins.watch('assets/styl/**/*.styl', ['css']); // PROBLEM
});

Declaring ['css'] in plugins.watch() should technically run the following task next:

File: css.js

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

gulp.task('css', function () {
  return gulp.src('assets/styl/*.styl')
    .pipe(plugins.stylus())
    .pipe(gulp.dest('/assets/css'));
});

File: gulpfile.js

var gulp = require('gulp');
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true });

gulp.task('develop', ['css', 'watch']);

Folder structure

- gulp/ - tasks/ - css.js - watch.js - gulpfile.js

---

Expected behavior

gulp develop should run tasks css and watch (it does). On file changes, watch should detect them (it does) and then run the css task (it's does not).

One solution

Not terribly fond of this solution as gulp.start() is being deprecated in the next release, but this does fix it:

File: watch.js

plugins.watch('assets/styl/**/*.styl', function() {
  gulp.start('css');
});

Answer 1

Either use gulp's builtin watch with this syntax:

gulp.task('watch', function () {
  gulp.watch('assets/styl/**/*.styl', ['css']);
});

Or gulp-watch plugin with this syntax:

gulp.task('watch', function () {
  plugins.watch('assets/styl/**/*.styl', function (files, cb) {
    gulp.start('css', cb);
  });
});

There's also probably a typo in your gulp.dest path. Change it to relative:

.pipe(gulp.dest('assets/css'));