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

【问题标题】：Gulp sass copies empty scss files to destination folderGulp sass 将空的 scss 文件复制到目标文件夹
【发布时间】：2015-09-04 08:33:48
【问题描述】：

我有一个任务：

   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/”目录时，会触发“监视”任务，并且因为文件是空的，所以它被复制到目标目录。结果，很多不需要的垃圾都是dest文件夹。为什么会发生这种情况，我该如何摆脱它？

更新

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

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

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

【问题讨论】：

您能否将您的代码包含在“watch”、“default”和“del”（如果适用）任务中？我正在尝试重现您的问题
@lambo477 我已经更新了我的问题。谢谢。

标签： javascript css sass gulp gulp-sass

【解决方案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，那么您面临的问题可能是通过解决原始问题引入的问题。

【讨论】：

是的，这是一个解决方案，谢谢。但我想弄清楚 gulp-sass 及其行为有什么问题。
@LazarevAlexandr，我添加了一些关于该问题的额外信息和替代解决方案。
再次感谢。我试过clip()，没有帮助。

【解决方案2】：

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

在此处查看“部分”：http://sass-lang.com/guide#topic-4

您可以创建部分 Sass 文件，其中包含少量 CSS 的 sn-ps 可以包含在其他 Sass 文件中。这是一个很好的方法模块化您的 CSS 并帮助使事情更易于维护。一个部分只是一个以下划线开头的 Sass 文件。你可能会命名它类似于_partial.scss。 下划线让 Sass 知道该文件只是部分文件，不应生成到 CSS 文件中。 Sass 部分与 @import 指令一起使用。

【讨论】：