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

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

• javascript
• build
• gulp
• gulp-watch
• gulp-less

• So you want that if --watch is passed you want to build + continue watching and build again if LESS sources change? – jsalonen Commented Jun 11, 2014 at 18:58
• Would love to get @robrich's input here :) – knownasilya Commented Jun 11, 2014 at 19:50

2 Answers 2

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 mand line argument to conditionally call and attach watch(). run a task that does the watching. Also, use gulp-plumber (https://github./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 mand line arg
        src = src.pipe(watch()).plumber(); 
    }

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

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', 'press', 'cleanup'), function(done) {
        done();
    });
}