Как правильно настроить gulp-clean-css?

Question

[Senseich]

Подскажите, кто пользовался модулем для gulp, который называется gulp-clean-css, как его правильно настроить. Я установил и подключил его по инструкции

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

Всё как бы работает, но на выходе просто слепленный файл из двух, в одну строчку... так и должно быть?
Обычно когда прогонял до этого через минификаторы онлайн, то группировались селекторы, объединялись похожие свойства ... а тут получается просто несколько файлов просто в одну строку.

Вот я взял для примера два фала:
main.css

body {
	background-color: #333333;
}

h1 {
	color: #fff;
}

h2 {
	color: #fff;
}

и второй font.css

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

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

На выходе

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

Это разве и есть минификация, даже h1 и h2 в первом файле не сгруппированы. Может как то настраивать надо? Хотя в документации вроде как есть строчка про слияние по умолчанию: https://github.com/jakubpawlowicz/clean-css#how-to...


Поделитесь опытом .. кто пользовался или может лучше модуль есть для минификации.

Answer 1

[Роман]

В той же документации, раздел Optimization levels.
Там же, есть несколько вполне годных примеров. Посто копируешь и вставляешь в задачу.

Comments

[Senseich]

Роман, этот пункт не разбирал подробно ... посмотрел примеры в инете, все пишут просто без параметров cleanCSS(), надо потестить ... а вы, что используете для минификации?

[Роман]

Senseich, я тоже подробно не разбирал. Но в инструкции и на форумах рекомендуют использовать "level 2". В итоге поставил такое правило:

level: {
    1: {
      all: true,
      normalizeUrls: false
    },
    2: {
      restructureRules: true
    }
  }

[Senseich]

Роман, да, вчера пробовал с level 2 поинтереснее минифицирует )

[1m1van]

Senseich, добрый день вчера поставил этот плагин, установил уровень 2 но итог как у вас в самом начале был... У вас получилось решить данный вопрос?

Answer 2

[Zen-Hub]

Вот так делай братан: .pipe(cleancss( { level: { 1: { specialComments: 0 } }/* , format: 'beautify' */ } ))
если нужен объёмный код - раскомментируй: /* , format: 'beautify' */