吞噬不再使CSS文件

Question

我使用gulp從LESS生成CSS。它工作完美，但現在腳本似乎忽略LESS文件。

這是我gulpfile.js（這是絕對正確的，因爲我沒有在最後一次修改）：

// Include Gulp plugins 
var gulp = require('gulp'), 
    less = require('gulp-less'), 
    watch = require('gulp-watch'), 
    prefix = require('gulp-autoprefixer'), 
    plumber = require('gulp-plumber'), 
    filter = require('gulp-filter'), 
    rename = require('gulp-rename'), 
    path = require('path') 
; 
// Compile LESS to CSS 
gulp.task('build-less', function() { 
    const fileFilter = filter(['*', '!mixins.less', '!variables.less']); 
    gulp.src('./public/less/*.less') // path to less file 
     .pipe(fileFilter) 
     .pipe(plumber()) 
     .pipe(less()) 
     .pipe(gulp.dest('./public/css/')) // path to css directory 
    ; 
}); 
// Get vendors' code 
gulp.task('build-vendors', function() { 
    gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file 
     .pipe(plumber()) 
     .pipe(less()) 
     .pipe(rename(function (path) { 
      //rename all files except 'bootstrap.css' 
      if (path.basename + path.extname !== 'bootstrap.css') { 
       path.basename = 'bootstrap-' + path.basename; 
      } 
     })) 
     .pipe(gulp.dest('./public/css')) // path to css directory 
    ; 
}); 
// Run the build process 
gulp.task('run', ['build-less', 'build-vendors']); 
// Watch all LESS files, then run build-less 
gulp.task('watch', function() { 
    gulp.watch('public/less/*.less', ['run']) 
}); 
// Default will run the 'entry' task 
gulp.task('default', ['watch', 'run']); 

這裏是調用和輸出：

$ gulp 
[11:21:03] Using gulpfile /var/www/path/to/project/gulpfile.js 
[11:21:03] Starting 'watch'... 
[11:21:03] Finished 'watch' after 21 ms 
[11:21:03] Starting 'build-less'... 
[11:21:03] Finished 'build-less' after 13 ms 
[11:21:03] Starting 'build-vendors'... 
[11:21:03] Finished 'build-vendors' after 4.65 ms 
[11:21:03] Starting 'run'... 
[11:21:03] Finished 'run' after 5.37 μs 
[11:21:03] Starting 'default'... 
[11:21:03] Finished 'default' after 6.05 μs 

的whatch也能正常工作 - 當我編輯我的LESS文件時，我得到如下輸出：

[11:22:22] Starting 'build-less'... 
[11:22:22] Finished 'build-less' after 1.96 ms 
[11:22:22] Starting 'build-vendors'... 
[11:22:22] Finished 'build-vendors' after 1.78 ms 
[11:22:22] Starting 'run'... 
[11:22:22] Finished 'run' after 5.08 μs 

我也試圖直接運行build-less：

$ gulp build-less 
[11:24:06] Using gulpfile /var/www/path/to/project/gulpfile.js 
[11:24:06] Starting 'build-less'... 
[11:24:06] Finished 'build-less' after 13 ms 

沒有錯誤，而且在CSS文件中沒有變化。

這裏可能出現什麼問題以及如何解決問題？

Answer 1

gulp-filter使用multimatch來匹配文件路徑和通配模式。爲multimatchhas this to say about *的文檔：

*匹配任何數目的字符，而不是/

既然你想與像public/less/foo.less路徑匹配文件（包含/）使用一個星號*不起作用。您必須使用兩個星號**：

gulp.task('build-less', function() { 
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']); 
    gulp.src('./public/less/*.less') // path to less file 
    .pipe(fileFilter) 
    .pipe(plumber()) 
    .pipe(less()) 
    .pipe(gulp.dest('./public/css/')); // path to css directory 
});