javascript - Gulp sass 将空的 scss 文件复制到目标文件夹

Question

我有一个任务:

   gulp.task('compile_scss, function() {
        return gulp.src('/admin_app/scss/*.scss')
            .pipe(sass())
            .pipe(dest('/admin_app/css/'))
    });

当我将新的空“.scss”文件添加到“/admin_app/scss/”并从上面运行任务时，空的“.scss”文件被复制到目标文件夹。如果文件不为空，一切正常:一个有效的 css 文件(带有“.css”扩展名)被编译并且没有“.scss”文件被复制。问题是当我将新的“.scss”文件添加到“/admin_app/scss/”目录时，触发了“watch”任务，并且由于文件为空，它被复制到目标目录。结果，很多不需要的垃圾都是 dest 文件夹。为什么会发生这种情况，我该如何摆脱它？

已更新

我的“监视”和“默认”任务:

gulp.task('watch', ['compile_scss'], function() {
    apps.forEach(function(appName) {
        gulp.watch('/admin_app/scss/*.scss', ['compile_scss']);       
    });
});

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

Answer 1

解决此问题的一种方法是简单地过滤空文件。

尝试这样的事情:

var filter = require('gulp-filter'),

gulp.task('compile_scss, function() {
    return gulp.src('/admin_app/scss/*.scss')
        .pipe(filter(function(a){ return a.stat && a.stat.size }))
        .pipe(sass())
        .pipe(dest('/admin_app/css/'))
});

还有一个专门用于此目的的插件。你可以像这样使用它:

var clip = require('gulp-clip-empty-files'),

gulp.task('compile_scss, function() {
    return gulp.src('/admin_app/scss/*.scss')
        .pipe(clip())
        .pipe(sass())
        .pipe(dest('/admin_app/css/'))
});

此外:在编译空文件时，似乎有一些关于 gulp-sass 和底层库的问题的报告。有一个 Github issue对于 gulp-sass，报告此问题应该在插件的 2.x 版本中解决。如果您已经在运行 2.x，您面临的问题可能是解决原始问题时引入的问题。