gulp-watch, gulp-watch-less don't fire

Question

I'm having trouble getting gulp-watch or gulp-watch-less to fire after following the documented examples. I originally through the problem was with lazypipe (not shown here), but it appears to me that I'm doing something wrong in the way I'm using the plugins. Here's my dumbed-down code which is still not working.

Note that I tried this with plain gulp-watch and it exhibits the exact same issue: it doesn't trigger subsequent pipes on change. I'll include info around that here in case that's the problem.

Here's my gulpfile.

var debug = require ( 'gulp-debug' );
var gulp = require ( 'gulp' );
var less = require ( 'gulp-less' );
var watchLess = require ( 'gulp-watch-less' ); 

gulp.task ( 'dev-watch', function () {
  // main.less just imports child less files
  gulp.src ( './app/styles/less/main.less' )
    .pipe ( watchLess ( './app/styles/less/main.less' ) )
    .pipe ( debug () );
    .pipe ( less () )
    .pipe ( gulp.dest ( './app/styles' ) )
  ;
});

When I start the task, it executes and generates the expected files perfectly. I see debug output the stream info just fine as well.

When I change a file I see that watchLess is picking up the change:

 [10:49:54] LESS saw child.less was changed
 [10:49:54] LESS saw child.less was changed
 [10:49:54] LESS saw main.less was changed:by:import
 [10:49:54] LESS saw main.less was changed:by:import

However, the less task doesn't execute. It doesn't appear to be emitting anything because debug doesn't fire.

Here's the pertinent package.json info:

"devDependencies": {
  "gulp": "^3.8.7",
  "gulp-less": "^1.3.6",
  "gulp-watch": "^1.2.0",
  "gulp-watch-less": "^0.2.1"
}

Answer 1

Your code merely runs the watcher in pipe, but does not tell what to do then.

The working example should be the following:

var
  gulp = require('gulp'),
  debug = require ('gulp-debug'),
  less = require ( 'gulp-less'),
  watchLess = require('gulp-watch-less');

gulp.task('dev-watch', function () {
  watchLess('./app/styles/less/main.less')
    .pipe (debug ())
    .pipe(less())
    .pipe(gulp.dest('./app/styles'))
});

However, you can also do the same thing using merely gulp-watch or gulp (gulp.watch).

Answer 2

this must be the best solution, and I get in readme in gulp-less github; https://github.com/plus3network/gulp-less https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md npm i stream-combiner2 --save-dev

var combiner = require('stream-combiner2');

var combined = combiner.obj([
    gulp.src(srcs),
    less(),
    autoprefixer({
        browsers: ['last 6 versions'],
        cascade: false
    }),
    isDev ? null : cleanCss(),
    gulp.dest(targetDir + 'css/multi/'),
].filter(v => v));

// any errors in the above streams will get caught
// by this listener, instead of being thrown:
combined.on('error', console.error.bind(console));
combined.on('end', () => {}); //done have been call when return combined;
return combined;