Gulp-less not building LESS when included file is changed

Question

I am using the following folder structure:

css
|_ main.css
|
|_ less
   |_ main.less
   |_ sub.less
   |
   |_ shared
      |_ variables.less
      |_ header.less
      |_ footer.less

I am using the following in my gulpfile.js

gulp.task('less', function() {
    gulp.src(paths.less + 'main.less', {read: true})
        .pipe(plugins.plumber({errorHandler: onError}))
        .pipe(plugins.less({
            paths: [paths.less + 'shared', paths.less]
        }))
        .pipe(plugins.plumber.stop())
        .pipe(gulp.dest(paths.css));
});

...

gulp.task('less:watch', function(){
    gulp.watch([paths.less + '**/*.less'], ['less']);
});

gulp.task('default', ['less', 'less:watch']);

My main.less includes @imports for all the other LESS files.

@import "sub.less";
@import "./shared/variables.less";
@import "./shared/header.less";
@import "./shared/footer.less";

• If a LESS file (other than main.less) is updated the file main.css does not change.

• If main.less is updated (needed after any other LESS file change), main.css then updates.

How can I modify my gulpfile.js to update the "main.css" file regardless of which LESS file is changed?

Thank you.

Answer 1

I could not directly reproduce your problem, but I expect it may due to the modified files are read from the file system file cache.

Less uses the fs.readFile call to read the imported files. By default this call opens the file with the r option. The docs do not make clear that the r option uses the file system file cache, but docs do tell you that the rs option bypasses the file system file cache:

'rs' - Open file for reading in synchronous mode. Instructs the operating system to bypass the local file system cache.

This is primarily useful for opening files on NFS mounts as it allows you to skip the potentially stale local cache. It has a very real impact on I/O performance so don't use this flag unless you need it.

Note that this doesn't turn fs.open() into a synchronous blocking call. If that's what you want then you should be using fs.openSync()

Possible solution:

Let Less open the files with the rs option. Find the node_modules/gulp-less/node_modules/less/lib/less-node/file-manager.js file and replace line 56 with the following code:

fs.readFile(fullFilename, {encoding: 'utf-8', flag: 'rs'}, function(e, data) {

Otherwise you could wonder why your modified file are still in the file cache and try to rsync the file cache: https://superuser.com/questions/319286/how-to-totally-clear-the-filesytems-cache-on-linux

Answer 2

There is gulp-progeny plugin that targets your workflow.