Watching in Gulp: maintaining task and watch in separate places

I’ve started using gulp for everything. I love it. It’s simple and easy to get started. However, with any non-trivial project that gulpfile.js doesn’t take long to get beastly.

One thing I’ve done to deal with this is to separate tasks into separate files (gulp/tasks/sass.js, gulp/tasks/jsx.js, gulp/tasks/ghpages.js, gulp/tasks/watch.js, …) and use require-dir to require all the tasks into my gulpfile.js. I really like this way of doing things.

But any time I add or edit a task, I have to remember to keep the watch updated as well. The “so-fresh-so-clean-snob” inside of me doesn’t like the gulp.watch(files, [task]) being so disconnected from the related task.

I played with using a gulp/config.js file to list all my src values, used in the tasks, and then looped over in my watch task so at least I only have to list my files in one place. But this goes against a core gulp philosophy: code over configuration.

I’d like to define my gulp.watch(files, [task]) in the task it’s related to:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('./src/scss/styles.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'));

  if (watch) { /* some kind of option defined somewhere */
    gulp.watch('./src/scss/**/*.scss', [sass]);
  }
});

I’ve played around with yargs or commander but then I feel the burden of whether or not I’m going to document supported arguments.

I’m just curious what others out there are doing?

[thasmo]

With Gulp 4 I use something like this, simplified:

var task = function() {
    if(gutil.env.watch && !gulp.lastRun(task)) {
        gulp.watch('**', task);
    }

    return gulp.src('**').pipe(...);
};

Which can be called with gulp task --watch and could be more simplified maybe with a helper function.

For paths I’m also using a global config object.

You can also have a look at the current state of my approach(es): https://github.com/thasmo/gulp.boilerplate

[phated]

Now that gulp.watch behaves the same as the rest of the task system, I don’t think it makes much sense to put inside a task. You can just put it outside the task system and start the watcher based on a flag or something.

So I’m going to close this.