глотком 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 /», запускается задача «смотреть», а поскольку файл пуст, он копируется в целевой каталог. В результате много ненужного мусора является папкой 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 и основной библиотеки при компиляции пустых файлов. Существует Github issue для gulp-sass, сообщая, что это должно быть разрешено в версиях 2.x плагина. Если вы уже используете 2.x, проблема, с которой вы сталкиваетесь, может быть проблемой, возникшей при решении исходной проблемы.

Answer 2

Если вы добавили в папку sass пустые scss файлов, прикрепите их знаком подчеркивания: _empty.scss.

См «Partials» здесь: http://sass-lang.com/guide#topic-4

Вы можете создавать частичные файлы Sass, которые содержат небольшие фрагменты CSS , которые можно включить в другие файлы Сасс. Это отличный способ для модуляции вашего CSS и упрощения обслуживания. Частичный - это просто файл Sass с именем подчеркивания. Вы можете назвать что-то вроде _partial.scss. Подчеркивание позволяет Sass знать, что файл является лишь частичным файлом и что он не должен быть сгенерирован в файл CSS. Частицы Sass используются с директивой @import.