Gulp -watch, gulp -watch-less do not work

Question

I am having trouble getting gulp-watch or gulp-watch-less to shoot after you documented the Examples. I initially came across the lazypipe problem (not shown here), but it seems to me that I'm doing something wrong in the way I use plugins. Here's my dumb code that still doesn't work.

Note that I tried this with the usual gulp -watch and it found the same problem: it does not start subsequent pipes when changing. I will include information about this here in case of a problem.

Here is 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 run the task, it executes and perfectly generates the expected files. I see that debug is outputting stream information as well.

When I change the file, I see that watchLess is typing changes:

  [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 smaller the task is not performed. It does not seem to emit anything because debugging is not working.

Here is the relevant 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 simply launches an observer in the handset, but does not tell you what to do next.

A working example should be as follows:

 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 using only gulp -watch or gulp (gulp.watch).

Answer 2

this should be the best solution and I get 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;