Gulp: Watching in Gulp: maintaining task and watch in separate places

[jehoshua02]

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?

[contra]

I use gulp-autowatch.

I do want to start adding some more sugar for stuff like this

[Aaronius]

Thanks for asking this question @jehoshua02. I was wondering the same thing and found this through Google.

[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]

@thasmo that's very close to how I do it. However, I recommend not using gulp-util as it is being deprecated and using a named function instead of an anonymous one.

[thasmo]

@phated, hey! What's the recommended Gulp 4-ish alternative to gulp-util? And by named function you mean function task() instead of var task = function()?

[TrySound]

@thasmo Check gulp-util dependencies. minimist is used for env.

[thasmo]

Thanks! Got it running. :)

[thasmo]

Is https://github.com/gulpjs/gulplog also deprecated?

[TrySound]

@thasmo Nope. It's new logger which replaced previous version in gulp-util.

[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.