gulpgulp-watchgulp-less

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


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"
}

Solution

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