Как создать спрайт из изображений с одинаковой шириной и высотой через gulp?

Question

[PrinsAlbert]

Задача:
Много изображений, в нескольких каталогах, с разными расширениями и разной высотой и шириной.
Чтобы не обрабатывать все это в ручную:

1. Eсть ли в gulp плагин или алгоритм, который позволит найти похожие изображения с одинаковой высотой и шириной и сделать из них спрайт.
   
2. Только с одинаковой высотой или только одинаковой шириной или только одинаковым расширением и также сделать из них спрайт
   

Подсказали плагин gm
aheckmann.github.io/gm/docs.html#imagemagick
Но понятия не имею как им пользоваться и есть ли там нужные опции.

Можно ли добавить к этому поддержку ретины.

Алгоритм:

• Ищем похожие изображения, обычно иконки
  
• Оптимизируем
  
• Сжимаем в спрайт
  
• Сжимаем в спрайт для поддержки ретины
  
• Обычные изображения в 1 каталог
  
• С ретиной в другой
  
• Css файл с обычными изображениями в один каталог
  
• Css файл с ретиной в другой.
  

Структура на выходе:
index.html
-style

• все стили
  

-css

• sty.min.css
  
• sprite.css
  
• [e-mail]
  

-images

1. все изображения
   

-img
--spite
--sprite@2

Кто решал эту задачу?
И как решили?

Answer 1

[Artem Malko]

Решений сейчас появилось масса. Вообще png-спрайтами уже пользоваться не комильфо, лучше сразу брать вектор (за рекдим исключением, когда необходимо сложные градиенты отобразить, берем растр).
Воркфлоу работы с такой графикой отлично реализован в TARS, рекомендую.

Answer 2

[makintosh87]

Вот здесь посмотри

Comments

[PrinsAlbert]

Не это ерунда, совсем не глубокое иследование вопроса и никак задачу не решает. Там нет главного, фильтрации иконок по размерам, очень удобно делать несколько спрайтов 1 формата

Answer 3

[Иван Сергеевич]

Есть замечательный плагин gulp.spritesmith
С ним можно сделать всё, что угодно
Делал как-то, чтобы было @1, @2, @4, и использовал тогда SASS. Заганял всё в массив и парсил, через тот же SASS, в нужное место

Comments

[PrinsAlbert]

Нет главного фильтрации исходных картинок для спрайтов и вроде это решается через это https://github.com/aheckmann/gm