Генерация CSS-спрайтов с Gulp

[vdv73rus]

Хм, а я постепенно ушёл от спрайтов в сторону base64.
Для grunt / gulp также есть плагины с генерацией кода в синтаксисе препроцессоров. Чистота исходников поддерживается.

Пользуясь случаем шлю лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл.

[rhamdeew]

Прям все что в спрайтах раньше размещалось теперь в base64? Интересует годный плагин под grunt с таким функционалом.

[Chaptykov]

Такой, как этот?

[aTei]

> лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл

Вы про отдельный css файл или файл, в котором весь другой css?

[vdv73rus]

Я про то, когда в исходном коде просто лежит хеш и непонятно что это за картинка.
Так просто её заменить, например, не быстро: надо сохранить её из браузера, отмодифить, получить заново хеш и скопировать в файл.

У нормальных пацанов в исходнике должен быть путь до картинки, а сама она в репозитории. Преборазование в base64 должно происходить при компиляции ( grunt, rails etc. )

[vdv73rus]

Да, забыл спросить, а вы оптимизатор какой-нибудь натравливаете на спрайт после?

[Dobrii]

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

[frst]

Имеет смысл добавить возможность генерить несколько спрайтов из подпапок ./src/assets/images/sprite/ИМЯ_СПРАЙТА/*.* и заточить автоматизацию для ретиновых спрайтов чтобы из файлов с @2x собирался отдельный спрайт

[GruZZ]

Текущие б плагины заставить нормально работать… На днях ломалась сборка из-за ошибки в одном из плагинов (в зависимостях) github.com/gulpjs/gulp/issues/561.
И на Ubuntu есть некоторые проблемы с imagemin (зависимости) и кэшированием изображений. У Grunt'а в свое время таких проблем не заметил.

[vdv73rus]

Ну такие решения есть, правда не в grunt / gulp модулях
1. https://github.com/jorgebastida/glue
2. https://github.com/jakesgordon/sprite-factory

[Dobrii]

Сделать генерацию из подпапок несложно, моя цель была показать базовые возможности.

[ishaba]

подозревал что это так, но все никак не мог это реализовать, не поделитесь примером?

[Dobrii]

Сейчас на проекте решение «в лоб». Под каждую папку создавалась отельная переменная со своими настройкаим.
Автоматический подхват вложенных папок я встретил у www.npmjs.org/package/gulp-sprite-generator.
У меня в планах подробнее рассмотреть эту обертку над spritesmith

[widowmaker]

Вы еще используете спрайты для одноцветных иконок?
Тогда для вас одна из альтернатив, да, у этой есть небольшие баги (неправильно работает с translate в svg), но использовать можно.

Pros:
* Занимает меньше места
* не нужна спец версия для ретин
* это текст, поэтому на него распространяются все css свойства текста
* отлично анимируется (т.к. текст же)

Cons:
* 3rd-party сервис, хотя есть сорсы, так что не факт что минус
* вид будет немного меняться в зависимости от системы и её настроек

[Dobrii]

К сожалению, иконки в виде шрифта — решение не очень хорошее из-за разных типов сглаживания в браузерах и ОС.
Так иконки в хроме выглядят хорошо, а в фф уже плохо. (Пример: github)

Если можно закрыть на это глаза, то шрифты — хорошее решение. Также заслуживает внимания и svg

[widowmaker]

Разница просто ужасная!!!

кликабельно

[Dobrii]

Мне неприятно смотреть на размытые иконки, например.
Дизайнеры тоже плохо относятся к этому.

[Nilard]

А как дизайнеры относятся к размытым иконкам на ретине или hidpi, коих становится все больше? Или вы генерируете по 2 спрайта на каждую расцветку иконок?

[Dobrii]

Под ретину готовится отдельный спрайт, в чем проблема?

[Nilard]

Ну я про это и говорю: 2 спрайта на каждую иконку каждого цвета.

[Dobrii]

Почему нельзя иконки разных цветов собрать в одном спрайте для 1 разрешения?
Или я не понял, что вы имел ввиду под расцветкой иконок.

[Chaptykov]

Разница весьма неприятная

[gobwas]

gulp-sprite-generator был написан как раз из-за невозможности юзать официальный порт spritesmith в «реверс» режиме — из css в css + sprites, без миксинов и прочего лишнего кода =)

[Dobrii]

Я немного не понимаю, зачем нужен «реверс» режим?

[gobwas]

Ну, изначально, у вас есть просто картинки для использования в css. Они совсем не спрайты, и даже разные состояния, скажем, кнопочек — у вас тоже разные картинки. Это исходники, точно такие же, как любой другой код. При сборке проекта, вы эти картинки, как и любой другой код, компилируете по какой-то логике. Когда вы, например, используете uglify, вы же не пишете для этого процесса какой-то код в исходниках? Точно так же и со спрайтами — вам не нужно нигде в .less или .css файлах использовать миксины, полученные, по факту, при компиляции исходников изображений =) Т.е. разработчик css и картинок совсем не должен знать о том, что произойдет с его творением при билде =)

[Dobrii]

А, я просто привык делать сразу спрайт и стараюсь не допускать таких моментов, когда я или кто-то делает на ховеры/эктивы и другие состояния разные картинки.
Я должен видеть сайт таким, как он будет в итоге и тестировать его работу.

Ваш плагин поддерживает .styl/.less и другие препроцессоры?
Можно ли отключить реверс режим?
Хочу пощупать его потому, что есть поддержка ретины.

[gobwas]

Ну да, вопрос в идеологии разработки еще.

Плагину по сути без разницы, какой файл ему скормить. Все, что он делает — это склеивает картинки в спрайты через spritesmith и меняет ссылки на них с правильным позиционированием.

Поддержки ретины нет, есть только поддержка нотации ([e-mail]), на основании которой, можно правильно группировать спрайты =)

[Dobrii]

Насчет ретины.
На выходе в css мы получим background-size/2 и позиции деленные на 2?

[gobwas]

Да )

[Dobrii]

Звучит хорошо :)

[gobwas]

Если что — велкам в issues =)

[Dobrii]

На днях поиграюсь и отпишу, если что

[rmaksim]

при увеличении масштаба страницы по ctrl+ у некоторых иконок появляются вертикальные/горизонтальные полоски по бокам от соседних иконок (особенно в хроме)

этого можно избежать сделав отступ между иконками в спрайте хотя бы в 1px

[Dobrii]

Можно :)

[yoyurec]

делайте SVG спрайты и будет вам счастье!
* меншье весит
* ретина ready
* font-icons почти то же, но глючат на мобильных (в частности windows phone) и вообще не айс
* кодировать в base64 плохо для мобилок, долго декодируются, используйте acsii

всё вышеописанное + grunt + дополнительные приятные плюшки (4 CSS на выходе для старых браузеров, JS-loader для них с определением поддержки SVG, генерация preview, сжатие png, etc) = Iconizr github.com/jkphl/grunt-iconizr

[Dobrii]

Раз такая пьянка, надо написать обертку для галпа :)

[yoyurec]

зачем?
у автора есть в планах, но не понятно когда, уже спрашивал ))
github.com/jkphl/grunt-iconizr/issues/9

можно попробовать через «прокси», всё руки не доходят — github.com/gratimax/gulp-grunt

[Dobrii]

Уже начал писать свою обертку :)

[svistiboshka]

Как успехи?

[Dobrii]

Как начал, так и приостановил работу, появились другие неотложные задачи.
Постараюсь найти время на этой или следующей неделе, чтобы дописать.

[yoyurec]

автор уже переписал компонент «svg-sprite», на неделе-другой обновит «grunt-iconizr» и напишет «gulp-iconizr»
github.com/jkphl/grunt-iconizr/issues/23#issuecomment-69060415

[AntonEssential]

Огромное спасибо за решение!!!

[Dobrii]

Пожалуйста :)
Я бы рекомендовал переходить на иконочные шрифты или свг

[AntonEssential]

Да шрифтовые иконки это круто, но часто в общий концепт они не подходят вот и приходиться рисовать самим и делать спрайты.

[efim4eg]

Немного подумав и почитав документацию stylus, было найдено решение.

Мое решение
Каждой иконке для состояния :hover, дать такое имя icon-(имя икоки):hover
Создать файл темплейт с таким содержимым ( в моем случае это sass, для less,scss допишите скобки )

{{#block "spritesheet"}}
.icon:before
  content: ''
  background-image: url('/static/png/{{{spritesheet.escaped_image}}}')
  background-size : {{spritesheet.px.width}}, {{spritesheet.px.height}}
  display: inline-block
{{/block}}

{{#each sprites}}
.icon.icon-{{name}}:before
  background-position: {{px.offset_x}} {{px.offset_y}}
  width: {{px.width}}
  height: {{px.height}}
{{/each}}

[Dobrii]

Вариант

[efim4eg]

Можешь добавить этот вариант в пост