Задать вопрос

ProgerSoft

Комментарии

  • Какую сборку выбрать для изучения (и какую для работы на) PHP на Windows?

    @ProgerSoft Автор вопроса
    Спасибо!
    Написано

  • Какую сборку выбрать для изучения (и какую для работы на) PHP на Windows?

    @ProgerSoft Автор вопроса
    Максим Федоров, Спасибо! А что на счет Docker?
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

    @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'))
});
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

    @ProgerSoft Автор вопроса
    SmthTo, возможно, это из-за gulpfileа? (наверное (нет))
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

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

  • Gulp - CSSO vs CLEAN-CSS?

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

  • Gulp - CSSO vs CLEAN-CSS?

    @ProgerSoft Автор вопроса
    SmthTo, Ты используешь CSSNano или Gulp-CSSNano?
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

    @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.
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

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

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

  • Gulp - CSSO vs CLEAN-CSS?

    @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
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

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

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

  • Gulp - CSSO vs CLEAN-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 не установлена.
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

    @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 (например объеденение селекторов и медия запросов)?
    Написано

  • Gulp - CSSO vs CLEAN-CSS?

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

  • Gulp - CSSO vs CLEAN-CSS?

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

  • Gulp - CSSO vs CLEAN-CSS?

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

  • Gulp - CSSO vs CLEAN-CSS?

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