Gulp watch not working as expected

Hello,

I'm having some trouble with Gulp not watching/compiling my files correctly. See the following code:

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
var path = require('path');

gulp.task('build-css', function () {
    return gulp.src('src/less/stylesheet.less')
        .pipe(less({ paths: [ path.join(__dirname, 'src/less') ] }))
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function() {
    gulp.watch('src/less/*.less', ['build-css']);
});

gulp.task('default', ['build-css', 'watch']);

src/less/stylesheet.less

@import "base";

p {
    color: blue;
}

src/less/base.less

html, body {
    background-color: #ccc;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="dist/css/stylesheet.css">
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium in dolor incidunt, perferendis enim! Corrupti maiores repudiandae, libero unde placeat, molestias, id debitis officia quod fuga optio earum tempore. Ipsum.</p>
</body>
</html>

Now, when I run gulp the resulting 'dist/css/stylesheet.css' file is fine. When changing the text color from blue to red in 'src/less/stylesheet.less' the build-css task is executed and the css is updated. When I change the background color in 'src/less/base.less' to something else, the build-css task is executed, but the resulting css file doesn't contain the changes. When completely stopping gulp and starting it again the changes in base.less are being picked up.

Am I doing something wrong? Why aren't the changes in de base.less file inserted into the resulting css when the watch task is triggered?

Vinze

8 years ago

Level 3

Narrowed it down, the issue came with gulp-less version 4.0. When using version 3.5 everything works fine. For now I downgraded the package and I'm following this github issue: https://github.com/stevelacy/gulp-less/issues/283

Please or to participate in this conversation.