Question

我使用以下文件夹结构：

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

我在 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']);

我的 main.less 包含所有其他LESS文件的@imports。

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

如果更新了LESS文件（ main.less 除外），则 main.css 文件不会更改。
如果 main.less 已更新（在任何其他LESS文件更改后需要）， main.css 则会更新。

如何修改gulpfile.js以更新“main.css”文件无论哪个LESS文件被更改？

谢谢。

Answer 1

我无法直接重现您的问题，但我希望它可能是由于修改过的文件是从文件系统文件缓存中读取的。

Less使用fs.readFile调用来读取导入的文件。默认情况下，此调用将使用r选项打开文件。文档没有说明r选项使用文件系统文件缓存，但是文档确实告诉您rs option绕过了文件系统文件缓存：

'rs' - 打开文件以便以同步模式读取。指示   操作系统绕过本地文件系统缓存。

这对于在NFS挂载上打开文件非常有用   您可以跳过可能过时的本地缓存。它有一个非常真实的   对I / O性能的影响因此，除非您需要，否则不要使用此标志。

请注意，这不会将fs.open（）转换为同步阻止   呼叫。如果这就是你想要的那么你应该使用fs.openSync（）

可能的解决方案：

让Less使用rs选项打开文件。找到node_modules/gulp-less/node_modules/less/lib/less-node/file-manager.js文件并使用以下代码替换line 56：

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

否则，您可能想知道为什么您的修改后的文件仍在文件缓存中并尝试rsync文件缓存：https://superuser.com/questions/319286/how-to-totally-clear-the-filesytems-cache-on-linux

Answer 2

有gulp-progeny插件针对您的工作流程。

当包含文件被更改时，Gulp-less不会构建LESS

2 个答案: