В Gulp как запретить gulp-sass минимизировать css в 1 файл

Question

Есть ли способ указать gulp-sass обрабатывать файлы SASS, но при этом сохранять структуру исходных папок.Мы не хотим, чтобы они были сведены / объединены в один основной файл.Например, если у меня есть:

src/
  components/
    _header.scss
    _sidebar.scss
    _card.scss

Могу ли я сказать, чтобы они обрабатывались в:

dist/
  components/
    header.css
    sidebar.css
    card.css

Gulpfile

gulp.task('styles:dist', () => {
  return gulp
    .src('./src/styles/**/*.+(scss|sass|css)', { base: './' })
    .pipe(
      sass({
        outputStyle: 'expanded',
      }).on('error', sass.logError)
    )
    .pipe(gulp.dest('./dist'));
});

Заранее спасибо!

Answer 1

Сначала установите плагин cleanCSS gulp, затем запустите задачу для преобразования файлов scss или sass или less в css, затем используйте задачу css для преобразования всех файлов css в один уменьшенный и объедините файл css.

var cleanCSS = require('gulp-clean-css');

gulp.task('css', () => {
return gulp.src('./src/styles/**/*.css')
  .pipe(cleanCSS({
      compatibility: 'ie8',
      level: {
          1: {
              specialComments: 0,
          },
      },
  }))
  .pipe('./dist'))
});