Спрайт изображений из фонового URL-адреса без препроцессоров, миксинов, наблюдателей и т. Д.

Question

Я хочу объединить иконки в моем проекте в одно изображение спрайта. Я нашел несколько решений, но все они требуют использования css preprocess mixins или чего-то еще в моем исходном коде CSS. Я хочу использовать как можно меньше технологий и библиотек.

У меня есть две папки в моем проекте:

resources/
public/

Оба они имеют одинаковую структуру:

images/
layouts/
scripts/
styles/
...

Я работаю в ресурсах / папке. Я пишу HTML, CSS, JS нормально. Я храню изображения там, как я вырезал их из Photoshop/Sketch. Я открываю HTML-файл из этой папки в браузерах, и все в порядке. Все ресурсы не сжимаются и не оптимизируются. Я не использую никаких препроцессоров или наблюдателей.

Когда я заканчиваю работу или ее часть, я запускаю GULP с некоторыми плагинами. Он копирует все ресурсы в public / folder и сжимает, объединяет, оптимизирует их. И я хочу создать спрайт изображения на этом этапе.

Поэтому в моей исходной папке / ресурсах я хочу, чтобы мой CSS выглядел так:

.facebook-icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/facebook-icon.svg);
}
.bubble-peak {
    width: 10px;
    height: 10px;
    background-image: url(../images/bubble-peak.png);
}

Это позволит мне работать нормально. Я могу видеть изображения на странице без компиляции. Просто закодируйте и обновите страницу в браузере.

Когда я закончу работу, я хочу увидеть мой общедоступный CSS примерно так:

.facebook-icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/sprite.svg);
    background-position: -100px -500px;
}
.bubble-peak {
    width: 10px;
    height: 10px;
    background-image: url(../images/sprite.png);
    background-position: -500px -100px;
}

Это возможно с любыми библиотеками или GULP-плагинами?

Большое спасибо!

Answer 1

Плагин postCSS под названием postcss-sprites делает свое дело: https://github.com/2createStudio/postcss-sprites

Но это не работает с векторной графикой.