Комментарии 47
Хм, а я постепенно ушёл от спрайтов в сторону base64.
Для grunt / gulp также есть плагины с генерацией кода в синтаксисе препроцессоров. Чистота исходников поддерживается.
Пользуясь случаем шлю лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл.
Для grunt / gulp также есть плагины с генерацией кода в синтаксисе препроцессоров. Чистота исходников поддерживается.
Пользуясь случаем шлю лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл.
+5
Прям все что в спрайтах раньше размещалось теперь в base64? Интересует годный плагин под grunt с таким функционалом.
0
> лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл
Вы про отдельный css файл или файл, в котором весь другой css?
Вы про отдельный css файл или файл, в котором весь другой css?
+1
Я про то, когда в исходном коде просто лежит хеш и непонятно что это за картинка.
Так просто её заменить, например, не быстро: надо сохранить её из браузера, отмодифить, получить заново хеш и скопировать в файл.
У нормальных пацанов в исходнике должен быть путь до картинки, а сама она в репозитории. Преборазование в base64 должно происходить при компиляции ( grunt, rails etc. )
Так просто её заменить, например, не быстро: надо сохранить её из браузера, отмодифить, получить заново хеш и скопировать в файл.
У нормальных пацанов в исходнике должен быть путь до картинки, а сама она в репозитории. Преборазование в base64 должно происходить при компиляции ( grunt, rails etc. )
0
Да, забыл спросить, а вы оптимизатор какой-нибудь натравливаете на спрайт после?
0
Имеет смысл добавить возможность генерить несколько спрайтов из подпапок ./src/assets/images/sprite/ИМЯ_СПРАЙТА/*.* и заточить автоматизацию для ретиновых спрайтов чтобы из файлов с @2x собирался отдельный спрайт
+1
Текущие б плагины заставить нормально работать… На днях ломалась сборка из-за ошибки в одном из плагинов (в зависимостях) github.com/gulpjs/gulp/issues/561.
И на Ubuntu есть некоторые проблемы с imagemin (зависимости) и кэшированием изображений. У Grunt'а в свое время таких проблем не заметил.
И на Ubuntu есть некоторые проблемы с imagemin (зависимости) и кэшированием изображений. У Grunt'а в свое время таких проблем не заметил.
0
Ну такие решения есть, правда не в grunt / gulp модулях
1. https://github.com/jorgebastida/glue
2. https://github.com/jakesgordon/sprite-factory
1. https://github.com/jorgebastida/glue
2. https://github.com/jakesgordon/sprite-factory
0
Сделать генерацию из подпапок несложно, моя цель была показать базовые возможности.
0
подозревал что это так, но все никак не мог это реализовать, не поделитесь примером?
0
Сейчас на проекте решение «в лоб». Под каждую папку создавалась отельная переменная со своими настройкаим.
Автоматический подхват вложенных папок я встретил у www.npmjs.org/package/gulp-sprite-generator.
У меня в планах подробнее рассмотреть эту обертку над spritesmith
Автоматический подхват вложенных папок я встретил у www.npmjs.org/package/gulp-sprite-generator.
У меня в планах подробнее рассмотреть эту обертку над spritesmith
0
Вы еще используете спрайты для одноцветных иконок?
Тогда для вас одна из альтернатив, да, у этой есть небольшие баги (неправильно работает с translate в svg), но использовать можно.
Pros:
* Занимает меньше места
* не нужна спец версия для ретин
* это текст, поэтому на него распространяются все css свойства текста
* отлично анимируется (т.к. текст же)
Cons:
* 3rd-party сервис, хотя есть сорсы, так что не факт что минус
* вид будет немного меняться в зависимости от системы и её настроек
Тогда для вас одна из альтернатив, да, у этой есть небольшие баги (неправильно работает с translate в svg), но использовать можно.
Pros:
* Занимает меньше места
* не нужна спец версия для ретин
* это текст, поэтому на него распространяются все css свойства текста
* отлично анимируется (т.к. текст же)
Cons:
* 3rd-party сервис, хотя есть сорсы, так что не факт что минус
* вид будет немного меняться в зависимости от системы и её настроек
0
К сожалению, иконки в виде шрифта — решение не очень хорошее из-за разных типов сглаживания в браузерах и ОС.
Так иконки в хроме выглядят хорошо, а в фф уже плохо. (Пример: github)
Если можно закрыть на это глаза, то шрифты — хорошее решение. Также заслуживает внимания и svg
Так иконки в хроме выглядят хорошо, а в фф уже плохо. (Пример: github)
Если можно закрыть на это глаза, то шрифты — хорошее решение. Также заслуживает внимания и svg
0
gulp-sprite-generator был написан как раз из-за невозможности юзать официальный порт spritesmith в «реверс» режиме — из css в css + sprites, без миксинов и прочего лишнего кода =)
0
Я немного не понимаю, зачем нужен «реверс» режим?
0
Ну, изначально, у вас есть просто картинки для использования в css. Они совсем не спрайты, и даже разные состояния, скажем, кнопочек — у вас тоже разные картинки. Это исходники, точно такие же, как любой другой код. При сборке проекта, вы эти картинки, как и любой другой код, компилируете по какой-то логике. Когда вы, например, используете uglify, вы же не пишете для этого процесса какой-то код в исходниках? Точно так же и со спрайтами — вам не нужно нигде в .less или .css файлах использовать миксины, полученные, по факту, при компиляции исходников изображений =) Т.е. разработчик css и картинок совсем не должен знать о том, что произойдет с его творением при билде =)
0
А, я просто привык делать сразу спрайт и стараюсь не допускать таких моментов, когда я или кто-то делает на ховеры/эктивы и другие состояния разные картинки.
Я должен видеть сайт таким, как он будет в итоге и тестировать его работу.
Ваш плагин поддерживает .styl/.less и другие препроцессоры?
Можно ли отключить реверс режим?
Хочу пощупать его потому, что есть поддержка ретины.
Я должен видеть сайт таким, как он будет в итоге и тестировать его работу.
Ваш плагин поддерживает .styl/.less и другие препроцессоры?
Можно ли отключить реверс режим?
Хочу пощупать его потому, что есть поддержка ретины.
0
Ну да, вопрос в идеологии разработки еще.
Плагину по сути без разницы, какой файл ему скормить. Все, что он делает — это склеивает картинки в спрайты через spritesmith и меняет ссылки на них с правильным позиционированием.
Поддержки ретины нет, есть только поддержка нотации (img@2x.png), на основании которой, можно правильно группировать спрайты =)
Плагину по сути без разницы, какой файл ему скормить. Все, что он делает — это склеивает картинки в спрайты через spritesmith и меняет ссылки на них с правильным позиционированием.
Поддержки ретины нет, есть только поддержка нотации (img@2x.png), на основании которой, можно правильно группировать спрайты =)
0
при увеличении масштаба страницы по ctrl+ у некоторых иконок появляются вертикальные/горизонтальные полоски по бокам от соседних иконок (особенно в хроме)
этого можно избежать сделав отступ между иконками в спрайте хотя бы в 1px
этого можно избежать сделав отступ между иконками в спрайте хотя бы в 1px
0
делайте SVG спрайты и будет вам счастье!
* меншье весит
* ретина ready
* font-icons почти то же, но глючат на мобильных (в частности windows phone) и вообще не айс
* кодировать в base64 плохо для мобилок, долго декодируются, используйте acsii
всё вышеописанное + grunt + дополнительные приятные плюшки (4 CSS на выходе для старых браузеров, JS-loader для них с определением поддержки SVG, генерация preview, сжатие png, etc) = Iconizr github.com/jkphl/grunt-iconizr
* меншье весит
* ретина ready
* font-icons почти то же, но глючат на мобильных (в частности windows phone) и вообще не айс
* кодировать в base64 плохо для мобилок, долго декодируются, используйте acsii
всё вышеописанное + grunt + дополнительные приятные плюшки (4 CSS на выходе для старых браузеров, JS-loader для них с определением поддержки SVG, генерация preview, сжатие png, etc) = Iconizr github.com/jkphl/grunt-iconizr
0
Раз такая пьянка, надо написать обертку для галпа :)
0
зачем?
у автора есть в планах, но не понятно когда, уже спрашивал ))
github.com/jkphl/grunt-iconizr/issues/9
можно попробовать через «прокси», всё руки не доходят — github.com/gratimax/gulp-grunt
у автора есть в планах, но не понятно когда, уже спрашивал ))
github.com/jkphl/grunt-iconizr/issues/9
можно попробовать через «прокси», всё руки не доходят — github.com/gratimax/gulp-grunt
0
Уже начал писать свою обертку :)
0
Как успехи?
0
Как начал, так и приостановил работу, появились другие неотложные задачи.
Постараюсь найти время на этой или следующей неделе, чтобы дописать.
Постараюсь найти время на этой или следующей неделе, чтобы дописать.
0
автор уже переписал компонент «svg-sprite», на неделе-другой обновит «grunt-iconizr» и напишет «gulp-iconizr»
github.com/jkphl/grunt-iconizr/issues/23#issuecomment-69060415
github.com/jkphl/grunt-iconizr/issues/23#issuecomment-69060415
0
Огромное спасибо за решение!!!
0
Немного подумав и почитав документацию 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}}
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Генерация CSS-спрайтов с Gulp