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”文件。 問題是當我向“ / admin_app / scss /”目錄中添加新的“ .scss”文件時，觸發了“監視”任務，並且由於該文件為空，因此將其復制到目標目錄。 結果，很多不需要的垃圾是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和基礎庫中存在問題的報告。 gulp-sass出現Github問題 ，報告此問題應在插件的2.x版本中解決。 如果您已經在運行2.x，則可能要解決的原始問題就是您面臨的問題。

Answer 2

如果在sass文件夾中添加空的scss文件，請在它們的下划線以下划線： _empty.scss 。

請參閱此處的“部分”： http ://sass-lang.com/guide#topic-4

您可以創建部分Sass文件，其中包含少量CSS片段，您可以將其包含在其他Sass文件中。 這是模塊化CSS並幫助使事情易於維護的好方法。 部分文件只是一個以下划線開頭的Sass文件。 您可能將其命名為_partial.scss。 下划線讓Sass知道該文件只是部分文件，不應將其生成為CSS文件 。 Sass局部變量與@import指令一起使用。