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 文件夹。为什么会发生这种情况，我该如何摆脱它？

已更新

我的 "watch" 和 "default" 任务：

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 issue，报告说这应该在插件的 2.x 版本中解决。如果您已经运行 2.x，您面临的问题可能是解决原始问题时引入的问题。

Answer 2

如果您在 sass 文件夹中添加空 scss 文件，请在它们前面加上下划线：_empty.scss.

请参阅此处 "Partials"：http://sass-lang.com/guide#topic-4

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

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

Gulp sass copies empty scss files to destination folder

javascript

css

sass

gulp

gulp-sass