How to properly configure gulp-clean-css?

Question

gulp.js

Please tell me who used the gulp module called gulp-clean-css how to set it up correctly. I installed and connected it according to the instructions

let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');
 
gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'));
});

Everything seems to work, but the output is just a coherent file of two, in one line ... is it supposed to be like that?
Usually, when I ran it through online minifiers before, selectors were grouped, similar properties were combined ... but here it turns out just a few files just in one line.
Here I took two files as an example:
main.css

body {
  background-color: #333333;
}

h1 {
  color: #fff;
}

h2 {
  color: #fff;
}

and second font.css

h1 {
  font-family: Arial;
  font-size: 24px;
}

p {
  font-size: 14px;
  color: #ffe4c4;
}

At the exit

body{background-color:#333}h1{color:#fff}h2{color:#fff}h1{font-family:Arial;font-size:24px}p{font-size:14px;color:bisque}

This is minification, even h1 and h2 in the first file are not grouped. Maybe you need to set it up somehow? Although the documentation seems to have a line about the default merge: https://github.com/jakubpawlowicz/clean-css#how-to...

Share your experience .. who used or maybe there is a better module for minification.

Answer 1

In the same documentation, section Optimization levels .
In the same place, there are some quite suitable examples. Just copy and paste into the task.

Answer 2

Do it like this bro: .pipe(cleancss( { level: { 1: { specialComments: 0 } }/* , format: 'beautify' */ } ))
if you need big code - uncomment: /* , format: 'beautify' */