Question

我有一个任务：

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

当我添加新的空＆＃34; .scss＆＃34;提交给＆＃39; / admin_app / scss /＆＃39;从上面运行任务，清空＆＃34; .scss＆＃34;文件被复制到目标文件夹。如果文件不为空，一切正常：编译一个有效的css文件（使用＆＃34; .css＆＃34;扩展名）并且没有＆＃34; .scss＆＃34;文件被复制。问题是当我添加新的＆＃34; .scss＆＃34;文件到＆＃34; / admin_app / scss /＆＃34;目录，＆＃34;观看＆＃34;任务被触发，并且因为文件为空，它被复制到目标目录。结果，很多不需要的垃圾是dest文件夹。为什么会这样，我怎么能摆脱它？

已更新

我的＆＃34;观看＆＃34;和＆＃34;默认＆＃34;任务：

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。

参见＆＃34; Partials＆＃34;在这里：http://sass-lang.com/guide#topic-4

您可以创建包含少量CSS片段的部分Sass文件您可以包含在其他Sass文件中。这是一个很好的方法模块化您的CSS并帮助保持更容易维护。部分只是一个以前导下划线命名的Sass文件。你可能会说出来它像_partial.scss。 下划线让萨斯知道这一点该文件只是一个部分文件，不应生成进入CSS文件。 Sass partials与@import指令一起使用。

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

2 个答案: