Gulp sass copies empty scss files to destination folder

Question

I have a task:

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

When I am adding new empty ".scss" file to '/admin_app/scss/' and running task from above, empty ".scss" files is copied to destination folder. If file is not empty everything is ok: a valid css file( with ".css" extension) is compiled and no ".scss" files are copied. The problem is when I add new ".scss" file to "/admin_app/scss/" directory, a "watch" task is triggered, and because file is empty, it is copied to destination directory. As a result, a lot of unneeded garbage is dest folder. Why this happens and how can I get rid of it?

UPDATED

My "watch" and "default" tasks:

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

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

Could you include your code for the 'watch', 'default and 'del' (if applicable) tasks? I'm trying to recreate your problem — gtlambert, Sep 04 '15 at 09:11

Patrick Kostjens · Accepted Answer · 2015-09-04T10:22:49.003

One way to solve this problem would be to simply filter the empty files.

Try something like this:

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/'))
});

There's also a plugin specifically for this purpose. You can use it like this:

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/'))
});

In addition: there seem to have been several reports of problems in gulp-sass and underlying libraries when compiling empty files. There is a Github issue for gulp-sass, reporting this should be solved in the 2.x versions of the plugin. If you're already running 2.x, the problem you are facing might be an issue introduced by solving the original problem.

Yes, it is a solution, thanks. But I`d like to figure out what is wrong with gulp-sass and its behaviour. — Alexandr Lazarev, Sep 04 '15 at 10:09
@LazarevAlexandr, I added some extra information on the problem and an alternative solution. — Patrick Kostjens, Sep 04 '15 at 10:23

score 1 · Answer 2 · answered Jun 20 '17 at 13:06

If you add empty scss files in your sass folder, prefix them with underscore: _empty.scss.

See "Partials" here: 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 copies empty scss files to destination folder

2 Answers2