Плагин grunt/gulp для создания sprite?

Question

[anderysen]

Добрый день!
Подскажи пожалуйста может кто встречал плагин для grunt/gulp который работает по алгоритму:
1) из определённой папки достаёт изображения;
2) склеивает их в спрайт;
3) пробегает по уже созданному css/scss файлу;
4) меняет вызов background-image: ... ;
5) на background: url('sprite.png') x y no-repeat;

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

Буду благодарен любым идеям и подсказкам. Спасибо за внимание

Answer 1

[anderysen]

Нашёл под мои нужды плагин:
https://github.com/iAdramelk/grunt-oversprite
Правда на установку всех зависимостей потратил день. Это был ад )) Если кто будет устанавливать - пишите помогу.
Сам плагин немного подправил чтоб в одну строку выводил:
background: url('...') x y no-repeat;
Работает с любым препроцессором.
Так что в целом я доволен.
Всем спасибо за ответы

Comments

[K G]

anderysen для gulp есть что-то подобное?

Answer 2

[Dobrii]

Я писал статью про генерацию спрайтов habrahabr.ru/post/227945
Но немного с дургим подходом.

Comments

[anderysen]

да я читал вашу статью... спасибо кстати за труд.. в своё время очень была полезна..
Вот там в комментариях у товарища "gobwas" был намёк на такой плагин, только он работает немного по другому он изначально парсит css и на вхождениях картинок ищет их в папке и клеит. а мне бы хотелось как раз наоборот.
joxi.ru/eAO6OgGHxX042o

[Dobrii]

Я как раз хотел скинуть ссылочку. https://www.npmjs.com/package/gulp-sprite-generator

[Dobrii]

Я запутался)

[Dobrii]

Сначала клеит картинки и затем идет в стилях менять?

[anderysen]

Dobrii: ну я так предполагал, чтоб клеить только нужные картинки. можно конечно изначально и css парсить, смотреть вызовы картинок из определённой папки и после этого клеить и заменять эту строку. впринципе суть не меняется

[K G]

Dobrii читал твою статью, как я понял плагины эти работают только с .png .jpg? А для работы еще и с .svg есть? Чтобы был комбайн .svg .png .jpg. Я встречал плагин gulpicon, но он какой-то муторный, переводит там свг спайт в пнг, через dataURI как-то подключает все. На его настройку день убьешь

[Dobrii]

pwnography: Честно, не искал подобное. Думаю, лучше иметь 2 задачи под png и svg, все-таки разные вещи — растр и вектор

Answer 3

[Константин Китманов]

Используем smartsprites, вот плагин для гранта: https://github.com/hogart/grunt-smartsprites.

Comments

[anderysen]

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

[Константин Китманов]

anderysen: нет, он обходит css-ку, парсит background-image, берет картинку, склеивает с другими, пишет новый CSS. Отдельных CSS не создает, говна не держим-с:) Но да, у вас немного другое.

[anderysen]

Константин Китманов: )))

Answer 4

[Pepsilike]

Спасибо за отличное решение, буду использовать у себя на проекте :)