Enabling gulp-watch conditionally with gulp-if (or something else)

Question

Basically I want to setup my task so that if I do gulp less --watch it will watch, otherwise just do the build. This is what I have so far:

'use strict';

var gulp = require('gulp');
var less = require('gulp-less');
var gulpif = require('gulp-if');
var watch = require('gulp-watch');
var cli = require('minimist')(process.argv.slice(2));

gulp.task('less', function () {
  return gulp.src(['./client/styles/styles.less', './client/styles/libs.less'])
    .pipe(less({ sourceMap: !cli.production }))
    .pipe(gulp.dest('./dist/styles'))
    .pipe(gulpif(cli.watch, watch()));
});

What happens is that it still executes the watch, but doesn't pass any files. This also prevents the task from process.exit()ing..

I'm assuming I have to either wrap it in something, or use an alternate method (not gulp-if)..

So you want that if `--watch` is passed you want to build + continue watching and build again if LESS sources change? — jsalonen, Jun 11 '14 at 18:58

score 6 · Accepted Answer · answered Jun 13 '14 at 13:12

gulp-watch is an endless stream, so if called it will never allow the process to exit. Your task always call watch() in order to pass it to gulpif even when the if won't need it. This means you will be running an unattached watcher. Additionally, the watcher needs to be first in your pipe chain so it can re-trigger the remaining handlers.

What you need to do is use the command line argument to conditionally call and attach watch(). run a task that does the watching. Also, use gulp-plumber (https://github.com/floatdrop/gulp-plumber) to keep the stream working if you have an error after the watcher.

var plumber = require('gulp-plumber');
gulp.task('less', function () {
    var src = gulp.src(['./client/styles/styles.less', './client/styles/libs.less']);

    if (cli.watch) {  // watch() won't be called without the command line arg
        src = src.pipe(watch()).plumber(); 
    }

    return src.pipe(less({ sourceMap: !cli.production }))
        .pipe(gulp.dest('./dist/styles'));
});

I found a work around, not exactly like yours but it works as well. I'm using `pipe(cli.watch ? watch() : gutil.noop())`. Thanks for this solution. — knownasilya, Jun 13 '14 at 16:34
`lazypipe().pipe(watch)` would probably also work https://www.npmjs.org/package/lazypipe — mpen, Jul 03 '14 at 01:17

score 0 · Answer 2 · answered Oct 25 '15 at 22:05

Not so elegant, but this works based on NODE_ENV (pulled in with gulp-environments) which I wanted to determine start of watch by (yes in development, no in production/deployment). Disclaimer: I just started using Gulp (4.0 beta so that gulp.series works), so this might be terrible, but it gets the job done.. :-)

var environments = require('gulp-environments');
var development = environments.development;
var production = environments.production;

if (development()) {
    gulp.task('default', gulp.series('flow', 'babel', 'cleanup', 'watch'), function(done) {
        done();
    });
}
else {
    gulp.task('default', gulp.series('flow', 'babel', 'compress', 'cleanup'), function(done) {
        done();
    });
}

Enabling gulp-watch conditionally with gulp-if (or something else)

2 Answers2