Как использовать пресеты Gupl-cssnano (вопрос новичка)?

Question

[Alexon Classic]

Всем привет!

Только начал познавать Gupl и столкнулся с необходимостью:

• минифицировать конечный CSS файл;
  
• удалить (объединить) в нем дубликаты
  
• прописать вендорные префиксы для css свойств (понятно что за это отвечает Gulp-Autoprefixer)
  
• удалить комменты
  
• ну и все остальное (чтобы много не расписывать) что нужно для нормального конечного CSS файла...
  

Перерыл кучу инфы в Инете, познакомился с такими плагинами как: gulp-clean-css, gulp-csso, gulp-css-purge ну и конечно же сам gulp-cssnano...

Остановил свой выбор на последнем - gulp-cssnano т. к. у него, есть множество пресетов.

Но! Как использовать их, на оф. сайте я не нашел (равно как и в Инете), кроме одного - discardOverridden: {removeAll: false}...

Пробовал по аналогии:

.pipe(cssnano({
	autoprefixer: {browsers: supported, add: true, cascade: false, grid: true}, //работает. Остальное - нет
	discardOverridden: {removeAll: false},
	cssDeclarationSorter: {order: 'smacss'},
	//discardComments: {removeAll: false},
	discardComments: false,
	cssDeclarationSorter: false,
	mergeIdents: true
}))

но cssnano:

1. удаляет все media - (discardOverridden)
   
2. не сортирует - (cssDeclarationSorter)
   
3. если у меня есть несколько различных классов с одинаковым стилями, например:
   
   

   .popover-title, .popover-content{
       font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
   }

   
   и
   
   

   body, label, select, input[type=text], textarea{
       font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
   }

   
   то cssnano не объединяет их воедино... Например вот так:
   
   

   body, label, select, input[type=text], textarea, .popover-title, .popover-content{
       font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
   }

   
   

Одним словом: подскажите плз как его юзать (если можно примерами)?

К сожалению, английский оооочень плохо знаю, но из того что смог прочитать, у меня закрадывается мысль, что cssnano нужно юзать с gulp-postcss... или не обязательно?

Заранее благодарю за ответы!

Answer 1

[Александр Баля]

CSSnano работает в десятки раз медленнее и по другим параметрам является не лучшим выбором. Используйте CSSO или gulp-clean-css со стандартными настройками - этого хватит, если не хотите копаться в настройках.

Comments

[Alexon Classic]

Ну скорость меня (в данном проекте) не беспокоит. готов подождать

Answer 2

[Андрей Югай]

Если используете 4 версию cssnano, попробуйте указать и preset, и ваши опции. Например:

.pipe(cssnano(['default', {
  cssDeclarationSorter: false,
  discardOverridden: false,
  discardComments: false,
  mergeIdents: true
}]))