gulp-less 不再生成 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 uses multimatch to match file paths against globbing patterns. The documentation for multimatch has this to say about *:

* matches any number of characters, but not /

由于您尝试使用单个星号 * 来匹配具有 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
});

gulp-less 不再生成 CSS 文件

gulp-less doesn't make CSS files anymore

build

npm

gulp

gulp-less

gulp-watch