Gulp.js — минификация CSS?

Question

[Noober_Proger]

Какой плагин для Gulp лучше использовать для минификации CSS? Есть много полагинов - CSSO, CSSNANO, CSSMIN и т.д. Какой оз них лучше использовать?

Comments

[Максим Тимофеев]

смотря что хотите получить, все он минифицируют css.
Плагины типа CSSNano имеют и другие возможности, так что если они не нужны - один разговор, если нужны - вопрос какие. Так что пока Ваш вопрос не о чем.
Вопрос из разряда "хочу поесть, что лучше сосиски с вермишелью или картоха с котлетками?".

[sim3x]

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

Прогоните конкретно ваш файл через все - и решите по размеру/скорости, что вас больше устроит

[Вадим Кот]

Был раньше подобный вопрос Gulp — CSSO vs CLEAN-CSS? - прочитайте там в комментариях к ответу есть результаты тестирования разных вариантов

[Noober_Proger]

Максим Тимофеев, Мне надо, чтобы с минификацией убрались все лишние комментарии, селекторы и свойства обединялись и если можно больше оптимизации...

[Максим Тимофеев]

Noober_Proger, тогда CSSNANO

[Noober_Proger]

Максим Тимофеев, Хорошо, спасибо!

[Noober_Proger]

Максим Тимофеев, А у меня gulp-clean-css был результзт лучше чем у cssnano...

Вот их результаты:
Код без минификации:

/* It's a very very importand COMMENT (no) */
/* It's a very very importand COMMENT (no) */

/* It's a very very importand COMMENT (no) */

/* It's a very very importand COMMENT (no) */
/* It's a very very importand COMMENT (no) */

/* It's a veerpi;kNT (no) */

/* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nulla vero sapiente, veritatis eaque placeat fuga nobis possimus quidem, deserunt totam, suscipit voluptas asperiores adipisci similique aut inventore ducimus aliquam blanditiis. Ea maiores cumque maxime, nesciunt, velit id ipsum eum odit doloremque at, inventore nulla! Possimus, incidunt vero velit odit pariatur quod suscipit deserunt soluta deleniti cumque. Placeat omnis consequuntur aliquam porro modi, quaerat ratione tenetur maxime, qui. Voluptas maiores nulla fugit eum voluptatem repellendus commodi nisi omnis. */

@media only screen and (min-height: 100px) {
	
	body {
		height: 100px;
		width: 100px;
		margin: 20px;
	}

}

blockquote {
	height: 167px;
	padding: 60px;
	position: absolute;
}

blockquote {
	box-sizing: border-box;
	text-align: center;
}

div {
	height: 167px;
	padding: 60px;
	position: absolute;
}

div {
	box-sizing: border-box;
	text-align: center;
}

.test {
	margin-top: 50px;
	margin-right: 50px;
	margin-bottom: 50px;
	margin-left: 50px;
}

@media only screen and (min-height: 100px) {
	
	html {
		outline: 100px solid #fff013;
		left: 100px;
		top: 20px;
	}

}

/* Mouse jumped on the donkey :D */

Код с минификацией CSSNANO: (beautify)

@media only screen and (min-height:100px) {
    body {
        height: 100px;
        width: 100px;
        margin: 20px
    }
}

blockquote {
    box-sizing: border-box;
    text-align: center
}

blockquote,
div {
    height: 167px;
    padding: 60px;
    position: absolute
}

div {
    box-sizing: border-box;
    text-align: center
}

.test {
    margin: 50px
}

@media only screen and (min-height:100px) {
    html {
        outline: 100px solid #fff013;
        left: 100px;
        top: 20px
    }
}

Вот их результаты:
Код с минификацией GULP-CLEAN-CSS (level: 2): (beautify)

blockquote,
div {
    height: 167px;
    padding: 60px;
    position: absolute;
    box-sizing: border-box;
    text-align: center
}

.test {
    margin: 50px
}

@media only screen and (min-height:100px) {
    body {
        height: 100px;
        width: 100px;
        margin: 20px
    }

    html {
        outline: #fff013 solid 100px;
        left: 100px;
        top: 20px
    }
}

[Максим Тимофеев]

Noober_Proger, как я и писал

смотря что хотите получить

и что в Вашем понимании

результат лучше

Плюс настроить можно 1000000000 способов и один и другой. Так что то что Вы получили, это лишь то что, с определенными настройками 1 плагин нравится лично Вам больше, чем другой с определенными настройками. Это не о чем по сути.

Answer 1

[lagudal]

А вы с предпроцессорами не работаете, или как? Не проще ли настроить чтобы gulp-sass к примеру компилировал и выдавал на выходе уже минифицированный css?

Comments

[Noober_Proger]

Я не знал что так можно сделать