In Gulp how to prevent gulp-sass to minify css into 1 file

Question

Is there a way to tell gulp-sass to process SASS files but still keep the source folder structure. We don't want them to be minified/concatenated into one main file. For example if I have:

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

Can I tell it to process them into:

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

Thanks in advance!

Answer 1

First install cleanCSS gulp plugin then run your task for convert scss or sass or less files to css then use css task for convert all css files to one minified and merge css file.

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