css - 忽略空的 css 文件

Question

我正在使用 gulp 从 less 文件生成 css 和 min.css 文件。然而，一些 less 文件没有 css 输出(比如 variables.less 只是定义导入变量)。

有没有办法跳过这个文件的空 css 流输出？

这是编译所有 less 文件的当前代码:

var config = {
    lessSrc: './Content/**/*.less'
};

gulp.task('css:lessmin', function () {
    gulp.src(config.lessSrc, { base: '.' })
        .pipe(less())
        .pipe(gulp.dest('.'))
        .pipe(minifyCss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('.'));
});

我可以将 lessSrc 更改为仅指定我要编译的文件或忽略我不想生成 css 和 min.css 文件的文件，但我有很多这样的情况，而不仅仅是在 less 文件中.

Answer 1

一个不错的选择是使用过滤器，过滤通配集的空结果:

var gulp = require('gulp');
var filter =  require('gulp-filter');
var less = require('gulp-less');

gulp.task('less', function() {
  return gulp.src('*.less')
    .pipe(filter(function(file) {
      return file.stat && file.contents.length;
    }))
    .pipe(less())
    .pipe(gulp.dest('.'));
});

您将虚拟文件对象传递给您的流，每个对象都包含文件的内容和信息。 stat 对象不仅告诉您它已经加载，而且还告诉您它是否是一个文件。内容是一个缓冲区。通过长度，您可以检查其中是否真的有任何内容。注意:这对处理空格没有帮助。该文件必须确实是空的。