Как правильно работать со спрайтами в gulp?

Question

[howehohit]

Здравствуйте. Собираюс спрайты через gulp (gulp-spritesmith), работает все хорошо, но есть несколько моментов (возможно, я чего-то недопонимаю).
Сейчас у меня алгоритм такой: я вырезаю все изображения, которые должны быть в спрайте, ложу их в папку images/sprites, гулп генерирует спрайт + файл стилей с размерами и координатами. Я ручками беру из него размеры и позицию, вставляю в нужном месте файла стилей во время верстки.
Проблема: Если нужно добавить еще иконки в этот спрайт - он перегенерируется с каждой новой иконкой и выходит что координаты всех предыдущих иконок нужно менять.

Что хотелось бы сделать:
В идеале: (сомневаюсь, что возможно).
1. Я ложу иконки в папке images/sprites, причем ложу в разные папки в зависимости от спрайта (то есть каждая папка внутри папки images/sprites - отдельный спрайт.
2. Пишу обычный css, вставляю где-то картинки.
3. При билде гулп генерирует спрайты из папок, потом проходит по поим файлам стилей (п.2) и если находит имя изображения из папки спрайтов ( например, ../images/sprite/picture.png) он заменяет эту запись на имя спрайта + координаты.
4. При добавлении новых иконок (даже в текущий готовый спрайт) все собирается и подставляется с начала.

Не в идеале:
1. Я ложу иконки в папке images/sprites, причем ложу в разные папки в зависимости от спрайта (то есть каждая папка внутри папки images/sprites - отдельный спрайт.
2. Пишу обычный css, вставляю адресс спрайта вручную.
3. При добавлении новых иконок в текущий готовый спрайт они добавляются не меняю структуру предыдущих иконок (чтобы не прописывать координаты заново)

Заранее спасибо

P.S. да, я читал эту статью habrahabr.ru/post/227945 :)

Answer 1

[Pavel Torbeev]

gulp-spritesmith помимо спрайта генерирует миксин, подключив который к препроцессору, вы можете подключать нужное изображение путем инклуда. Что то вроде:
.sprite(imgname);
Только название изображение. Миксин сам подставит нужный бекграунд (картинка спрайта) и бэкграунд позишн, размеры

Comments

[howehohit]

Спасибо, но, к моему сожалению, еще не дорос до препроцессоров :(

[Pavel Torbeev]

howehohit: попробуйте, это очень просто и ускорит разработку в несколько раз

[howehohit]

Pavel Torbeev: уже на less нацелился, посмотрел немного статей и видео уроков о нем, но все-никак не доберусь попрактиковаться :)

[Андрей Хохлов]

howehohit: Этот ответ является решением вашй проблемы.

[howehohit]

Андрей Хохлов: В будующем - да, но решение нужно сейчас,чтобы работа не стояла :)

[Pavel Torbeev]

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