CODEWITHSUNDEEP
gulpgulp-watchgulp-less
Markus
Markus

Reputation: 1563

Gulp Watch task

I have the following gulp tasks:

gulp.task('less', function() {
    gulp.src('public/stylesheets/**/*.less')
        .pipe(less())
        .pipe(minifycss())
        .pipe(concat('styles.min.css'))
        .pipe(gulp.dest('dist/public'))
});

gulp.task('watch', function () {
    gulp.watch('public/stylesheets/**/*.{css,less}', ['less']);
});

and both of them are included in my default task (among others):

gulp.task('default', ['clean'], function () {
    gulp.start('less','watch');
});

When I run gulp everything works fine. All my .less files are compiled into one minified .css file.

Now I make a change in any less file and see the output

[14:11:27] Starting 'less'...
[14:11:27] Finished 'less' after 1.49 ms

but my minified css file hasn't changed. Just for testing purposed I removed the minify/concat, but it had the same effect. The less task is working fine within the default task, but when started through watch nothing happens.

What am I missing here?

Upvotes: 0

Views: 2388

Answers (1)

DrinkBird
DrinkBird

Reputation: 834

Try using watch like this:

gulp.watch([your glob], function () {
    gulp.start(['less']);
});

I also believe that you need to remove .css from your glob pattern. Compiling LESS would produce CSS which would also trigger the watcher.

Upvotes: 1

Related Questions