Gulp — CSSO vs CLEAN-CSS?

Question

[ProgerSoft]

Что лучше использовать в gulp для минификации CSS стилей, CSSO или CLEAN-CSS В чем их минусы и плюсы и что лучше?

Answer 1

[Вадим Кот]

Сам когда то выбирал между csso и cssnano - после тестирования каждого в нескольких проектах, по результату после csso файлы стилей минифицированные были меньшего размера. Нужно конечно учитывать, что можно запускать с разными опциями, но я всегда делаю выбор на основе собственного тестирования. Поэтому выбор за вами.

Answer 2

[weranda]

Просто оставлю это здесь. Результаты тестов:

Красный цвет — не очень.
Синий цвет — норм.
Другой цвет — в среднем диапазоне циферки.

Comments

[Анатолий Димов]

Из комментов, импонирует CSSNano, а из скрина отталкивает...

Answer 3

[Rustam Bainazarov]

Ни то и не другое.

Лучше всего — CSSNano. Помимо обычной минификации CSS, он использует и другие методики сокращения кода (к примеру, преобразование RGB- и RGBA-цветов в HEX-цвета, удаление ненужных значений свойств, сокращение имён анимации, объединение нескольких классов через запятую в случае одинаковых стилей, ну и кучу всего другого).

https://cssnano.co
https://www.npmjs.com/package/gulp-cssnano

P. S. Работает с AutoPrefixer корректно (потому что тоже основан на PostCSS). Карты исходников тоже поддерживает.

UPDATE. Речь идёт именно о работе оригинального CSSNano (не gulp-cssnano) в связке с PostCSS для Gulp. Посмотрите комментарии других людей к моему ответу, там есть интересные вещи/аспекты касательно других подобных плагинов, которые вполне могут быть лучше, чем CSSNano.

Comments

[ProgerSoft]

В BlackList'е Gulp пакетов говориться, что не нужно использовать CSSNANO, а лучше использовать cleancss.

[Rustam Bainazarov]

ProgerSoft, спасибо за информацию, сейчас почитаю причину!

[alex]

ProgerSoft, в Блэклисте говорится, что нельзя использовать gulp-cssnano, а не cssnano. cssnano в свою очередь нужно юзать в связке с gulp-postcss

[sim3x]

И насколько медленно нано работает?

Зачем в 18 году использовать аутопрефиксер?

[Rustam Bainazarov]

sim3x, наверное, для лучшей поддержки браузеров? К примеру, perspective без префикса на iOS 10.X вызывает проблемы с z-index в ряде случаев, ну и тому подобное. В США, по статистике компании, где я работаю, нашими веб-сервисами с устройств на iOS 10 пользуются ~9% людей.

Autoprefixer надо, конечно, не тупо прогонять «last 20 versions», а настраивать его (+ оставлять функциональные комментарии для него в CSS-разметке). Transition'ы, конечно, префиксить не нужно, если нет цели поддержки древних браузеров.

NanoCSS работает быстро, если говорить на примере одного общего CSS размером как 100 Кб, так и 800+ Кб. Если куча мелких CSS (~90–100 штук) — примерно так же, как один.

Сборка из ~100 файлов LESS в один CSS + Autoprefixer + NanoCSS = 4–5 секунд на Macbook Pro 15 (2017). Общий размер CSS после этого — около 400 Кб. LESS-логика не особо сложная.

Но опять же скорость зависит от многих условий. Бывает и быстрее сборка, бывает медленнее.

[sim3x]

SmthTo,
0. Сколько лет назад браузеры ушли от префиксов?
Получается ради одного префикса тянется либа?
Мне не кажется ето нормальным

1. "Быстро" === я не успеваю переключиться на другой екран руками === <1c на >10Мб исходниках

Мой совет - не использовать пост нигде, кроме безвыходных ситуаций

[Rustam Bainazarov]

sim3x, хм, ну ладно про префиксы. Этот спорная тема.

Но NanoCSS для PostCSS чем не угодил? Сжимает, убирает ненужные вещи, комментарии сокрашает цвета, градиенты, анимации и пр. Всё отлично.

CSS/LESS-исходники на 10 Мб — это уже слишком :))

[sim3x]

SmthTo,
Разрабы браузеров уже давно решили данную "спорную тему"

Чем не угодил - он медленный на реальных задачах

Нет. В пределах нормы

[Rustam Bainazarov]

sim3x, но вы не учитывает великий и могучий фактор пользователей, которые заходят на сайт даже с IE11, Safari 10 и т. п.

Исходники всякого разного могут быть и 30 МБ. Вот у меня лежат исходники стилей целого веб-приложения с кучей всего — около 8 Мб. Обычные сайты — это около 500 Кб CSS, так что вполне нормальный инструмент.

[sim3x]

SmthTo,
Также как и вы не верстаете под ие6 - именно в ту пору префиксер имел смысл

Если вас устраивает его медлительность - ок
Если советуете кому-то - указывайте на базе чего он сделан и предупреждайте о том что инструмент очень медленный по сравнению с аналогами

[Rustam Bainazarov]

sim3x, в этом вы можете быть правы. Но вы бы могли тоже привести аналоги, иначе не понятно, с чем сравнить. С технологиями не рождаются и живут всю жизнь. Я с удовольствием сменю NanoCSS на что-то более эффективное.

[ProgerSoft]

gulp-clean-css можно хорошо настроить, и будет работать отлично, вот например параметор level со значением 2 может и хорошо сжимать, и объединять префиксы (медиа запросы) и многое другое. Я пробовал 1 раз gulp-cssnano, была проблема с keyframesами, не сжимал их. Теперь не могу выбрать, что лучше, gulp-clean-css, gulp-cssnano, или

[Rustam Bainazarov]

ProgerSoft, да, пробовал как раз с level 2 (последний, как помню), ещё комбинировал другие параметры, но остановился на NanoCSS, результаты получались лучше в плане уровня сжатия кода. В любом случае, нахожусь сейчас в поисках инструментов лучше, чем NanoCSS.

Единственная проблема, которую заметил у NanoCSS, это ошибка пирсинга свойства calc(80px + env(safe-area-inset-bottom)). Решилось обособлением env() скобками: calc(80px + (env(safe-area-inset-bottom)));

[ProgerSoft]

SmthTo, Значит, ты уверен(а), что самый лучший выбор - cssnano?

[ProgerSoft]

ProgerSoft, Я просто подумал, что cssnano не самый лучший выбор, потому что в рейтинге плагинов gulp для минификации css он находится на низком уровне. http: // prntscr.com / lvdfyx

[sim3x]

SmthTo,
https://goalsmashers.github.io/css-minification-be...

https://www.npmtrends.com/clean-css-vs-cssmin-vs-c...

[Rustam Bainazarov]

ProgerSoft, уверенность — понятие относительное, всегда рад ошибиться касательно технологии, иначе нет развития. Касательно NanoCSS был уверен не в плане скорости, а именно в результатах на выходе (сжатие, объединение и т. п.).

NanoCSS пока ничего ни разу не сломал, что случилось, к примеру, с CleanCSS, но вполне возможно, что это мои косые руки.

Вообще, вы весьма интересную тему подняли.

Сейчас товарищ sim3x прислал ссылку (первую) на сводную таблицу результатов, есть повод задуматься. Надо тестировать.

[ProgerSoft]

SmthTo, Я немного потестировал плагины для минификации CSS такие как gulp-csso, gulp-clean-css, gulp-cssnano, cssnano с gulp-postcss, gulp-minify-css, gulp-cssmin. csso не очень понравился, не хорошо сжимал, ненужные комментарии не удалял, селекторы и значения свойств и сами свойства не соеденял и так далее... Больше всего понравились результаты четырех пакетов - cssnano, gulp-cssnano, gulp-clean-css и gulp-cssmin. Clean-css я использовал два раза - с level: 2 и без. Без levelа был ужас. Но Clean-css (с левелов) и Cssmin куда-то теряли медиа запросы (их в прямом смысле в файле не было).

САМЫЕ ЛУЧШИЕ РЕЗУЛЬТАТЫ:
1) gulp-cssnano - Объеденял все свойства, менял имя keyframeов на короткие (а,b).
Минусы - не объеденял селекторы и медиа запросы

2) cssnano - Объеденял все свойства.
Минусы - не объеденял селекторы и медиа запросы, не менял имя кейфремов на короткие.

Самым лучшим справился gulp-cssnano, но я не понимаю, почему галп пакет справился лучше npm версии? Возможно вы знаете какие то опции для cssnano который еще больше минифицирует css (например объеденение селекторов и медия запросов)?

[ProgerSoft]

Вот результат моих тестировок: bit.ly/gulp-css-minify-plugins
В папке done-css находятся папки с названиями пакетов для минификации (да они не очень правильно названы, но поймете). В каждом из них находятся два файла. all.css и o.css. В all.css находятся мои написанные минифицированные стили. В o.css мои стили + normalize.css + bootstrap.css. В папке css находятся не минифицированные all.css и o.css.

P. S. В папке gulp-clean-css-level2 находятся файлы с минифицированием clean-css с level 2, а в папке gulp-clean-css опция level 2 не установлена.

[ProgerSoft]

Прошу прощения, gulp-clean-css с level 2 не только находит media запросы, но и объеденяет. Я просто неправильно медиа запросы писал :(

Самые лучшие результаты у gulp-cssnano gulp-clear-css с level 2 gulp-csso и cssnano

[Rustam Bainazarov]

ProgerSoft, у меня CleanCSS иногда ломал вложенные media-запросы. Но, возможно, дело исключительно в конфигурации.

CSSNano использую в стандартной конфигурации, если говорить не о Gulp-версии. Вполне возможно, у Gulp-версии CSSNano другая конфигурация, более агрессивная, поэтому сжимает она лучше.

Спасибо за результаты и тестирование, сегодня посмотрю!

[ProgerSoft]

SmthTo, Хорошо, но медия запросы я неправильно написал, я в медия запросах без селекторов свойства написал, когда будешь смотреть, в css/all.css в медия запросах добавь какой нибудь селектор, например html. Для запуска компиляции надо вызвать Gulp (4 версия).

Команды для запуска:
all.css - gulp-cssnano - gulp gulpCssNano
o.css - gulp-cssnano - gulp gulpCssNano2

all.css - gulp-clean-css - gulp gulpCleanCss
o.css - gulp-clean-css - gulp gulpCleanCss2

all.css - gulp-clean-css (level 2) - gulp gulpCleanCssLevel
o.css - gulp-clean-css (level 2) - gulp gulpCleanCssLevel2

all.css - gulp-minify-css - gulp gulpMinifyCss
o.css - gulp-minify-css - gulp gulpMinifyCss2

all.css - cssnano - gulp cssNano
o.css - cssnano - gulp cssNano2

all.css - gulp-cssmin - gulp gulpCssMin
o.css - gulp-cssmin - gulp gulpCssMin2

all.css - gulp-csso - gulp gulpCsso
o.css - gulp-csso - gulp gulpCsso2

[Вадим Кот]

ProgerSoft,
gulp-minify-css - deprecated в пользу gulp-clean-css
gulp-cssmin - дубликат gulp-minify-css
gulp-minify-css и gulp-cssmin имеют под капотом clean-css
Не лень выполнять 14 команд для теста? Я бы написал одну задачу под gulp, которая параллельно (gulp.parallel()) выполнила бы все эти таски за один раз.

[ProgerSoft]

Вадим Кот, вы правы, можно, но я сделал так, чтобы я мог запускать таски отдельно, например если в минификации clean-css я сделал ошибку, почему мне запускать все таски, чтобы исправить одну?

А если вы хотели сказать, что все в пользу clean-css, есть еще cssnano.

[ProgerSoft]

SmthTo, Я еще немного потестировал плагины cssnano (с gulp-postcss), gulp-csso и gulp-clean-css (с level: 2).

ОРИГИНАЛ:

body {
	transform: translate(-50%, -18px);
	color: rgba(255, 255, 25);

	width: calc(500px - 400px / 2px);
}
/* Tipwek;l./gme,w*/
.color {
	color: rgba(1, 1, 1, .2);/* Tipwek;l./gme,w*//* Tipwek;l./gme,w*/
}

@keyframes spineruojlgrnekjgrnem {
	0% {/* Tipwek;l./gme,w*/
		transform: translate(-50%, -18px);
		color: rgba(255, 255, 25);
	}
	100% {
		transform: translate(-50%, -18px);
		color: rgba(255, 255, 25);
	}
}

html {
	animation-name: spineruojlgrnekjgrnem;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-play-state: paused;
	animation-iteration-count: infinite;
}

@media screen and (min-width: 167px) {
	html {
		font-size: 568px;/* Tipwek;l./gme,w*//* Tipwek;l./gme,w*//* Tipwek;l./gme,w*//* Tipwek;l./gme,w*//* Tipwek;l./gme,w*/
		color: red;
	}
} 

@media screen and (min-width: 167px) {
	html {
		background-color: lime;
	}
}
/* Tipwek;l./gme,w*/
/* Tipwek;l./gme,w*/

/* Tipwek;l./gme,w*/
/* Tipwek;l./gme,w*/

/* Tipwek;l./gme,w*/


body {
	background-image: url(http://hello.com/hello.png);
	background-repeat: no-repeat;
	background-position: center top;

	margin-top: 50px;
	margin-left: 20px;
	margin-bottom: 70px;
	margin-right: 40px;

	padding: 300px 20px 300px 20px;
}

/* Tipwek;l./gme,w*/

РЕЗУЛЬТАТЫ МИНИФИКАТОРОВ:
Это результаты, которые дали нам минификаторы, только в несжатом варианте

gulp-clean-css (level: 2):

body {
    transform: translate(-50%, -18px);
    color: rgba(255, 255, 25);
    width: calc(500px - 400px / 2px);
    background-image: url(http://hello.com/hello.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 300px 20px;
    margin: 50px 40px 70px 20px
}

.color {
    color: rgba(1, 1, 1, .2)
}

@keyframes spineruojlgrnekjgrnem {

    0%,
    100% {
        transform: translate(-50%, -18px);
        color: rgba(255, 255, 25)
    }
}

html {
    animation-name: spineruojlgrnekjgrnem;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-play-state: paused;
    animation-iteration-count: infinite
}

@media screen and (min-width:167px) {
    html {
        font-size: 568px;
        color: red;
        background-color: #0f0
    }
}

gulp-clean-css объединил все media запросы, селекторы и свойства. В @keyframes плагин объединил "0%" и "100%", так как свойства и них были одни и те же. Убрал все комментарии.

cssnano:

body {
    transform: translate(-50%, -18px);
    color: #ffff19
}

.color {
    color: rgba(1, 1, 1, .2)
}

@keyframes spineruojlgrnekjgrnem {
    0% {
        transform: translate(-50%, -18px);
        color: #ffff19
    }

    to {
        transform: translate(-50%, -18px);
        color: #ffff19
    }
}

html {
    animation-name: spineruojlgrnekjgrnem;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-play-state: paused;
    animation-iteration-count: infinite
}

@media screen and (min-width:167px) {
    html {
        font-size: 568px;
        color: red;
        background-color: #0f0
    }
}

body {
    background-image: url(http://hello.com/hello.png);
    background-repeat: no-repeat;
    background-position: top;
    margin: 50px 40px 70px 20px;
    padding: 300px 20px
}

В cssnano убрана функция calc(), так как плагин выдавал ошибку при присутствии этой функции. cssnano НЕ объединил селекторы, но объединил свойства и media запросы. В @keyframes плагин не объединил "0%" и "100%", но он превратил "100%" в "to".

gulp-csso:

@keyframes spineruojlgrnekjgrnem {

    0%,
    to {
        transform: translate(-50%, -18px);
        color: rgba(255, 255, 25)
    }
}

body {
    transform: translate(-50%, -18px);
    color: rgba(255, 255, 25);
    width: calc(500px - 400px/2px);
    background-image: url(http://hello.com/hello.png);
    background-repeat: no-repeat;
    background-position: center top;
    margin: 50px 40px 70px 20px;
    padding: 300px 20px
}

.color {
    color: rgba(1, 1, 1, .2)
}

html {
    animation-name: spineruojlgrnekjgrnem;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-play-state: paused;
    animation-iteration-count: infinite
}

@media screen and (min-width:167px) {
    html {
        font-size: 568px;
        color: red;
        background-color: #0f0
    }
}

Здесь все так, как с gulp-clean-css, с двумя отличиями:

• В @keyframes он превратил "100%" в "to",
  
• @keyframes он переместил в самый вверх кода.
  

ЕЩЕ ВСЕ ПЛАГИНЫ ИЗ ЭТИХ ТРЕХ ПЕРЕМЕСТИЛИ media ЗАПРОС НА САМЫЙ ВНИЗ ФАЙЛА, КРОМЕ cssnano.

На этом все! Если у вас есть какие то опции, которые улучшают работу плагинов, то расскажите мне о них, пожалуйста. А пока побеждают gulp-clean-css с level:2 и gulp-csso.

[Rustam Bainazarov]

ProgerSoft, у меня CSSNano обрабатывает calc(), сжимает названия анимаций до одной и более букв и убирает все пробелы в конструкциях по типу «rgba(1, 1, 1, . 2)». Да и селекторы с одинаковыми свойствами объединяет через запятую.

[ProgerSoft]

SmthTo, Ты используешь CSSNano или Gulp-CSSNano?

[Rustam Bainazarov]

ProgerSoft, CSSNano.

[ProgerSoft]

А ты используешь какие нибудь опции?

[Rustam Bainazarov]

ProgerSoft, вообще никаких.

[ProgerSoft]

SmthTo, тогда почему у меня код с cssnano получился не очень а у тебя - велоиколепно?

[Rustam Bainazarov]

ProgerSoft, если честно, то не знаю :))

[ProgerSoft]

SmthTo, возможно, это из-за gulpfileа? (наверное (нет))

[Rustam Bainazarov]

ProgerSoft, у меня для простых проектов есть один очень простой и тупо настроенный, но рабочий файл конфигурации. Он сначала собирает Less-файлы в один, потом компилирует его в CSS, потом проходит PostCSS с Autoprefixer + CSSNano, после чего пишется сам файл.

[ProgerSoft]

Примерно вот так?

const
  gulp = require('gulp'),
  cssnano = require('cssnano'),
  autoprefixer = require('autoprefixer'),
  postcss = require('gulp-postcss'),
  less = require('gulp-less');

gulp.task('less', () => {
  return gulp.src('src/less/**/*.less')
    .pipe(less())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('src/css'))
});

[Sergey]

ProgerSoft, Рустам Байназаров, Вадим Кот,

Пару лет прошло. Интересно было читать ваши баталии. Может продолжите тему? Сейчас ситуация немного поменялась))

[Rustam Bainazarov]

Firsov36, да, конечно, я уже, честно, закинул конкретно этот аспект. Будет интересно узнать, что нового.