Html 来自后台的图像精灵和图像url，无需预处理器、混音器、观察者等

我想把我的项目中的图标压缩成一个精灵图像。我找到了一些解决方案，但它们都需要在我的原始css代码中使用css预处理混合或其他东西。我想要的是使用尽可能少的技术和库

我的项目中有两个文件夹：

resources/
public/

两者的结构相同：

images/
layouts/
scripts/
styles/
...

我在资源/文件夹中工作。我通常写HTML，CSS，JS。当我从Photoshop/Sketch中剪切图像时，我将图像存储在那里。我在浏览器中打开这个文件夹中的HTML文件，一切正常。并非所有资源都经过压缩和优化。我不使用任何预处理器或监视程序

当我完成工作或部分工作时，我会用一些插件运行吞咽。它将所有资源复制到public/文件夹中，并对其进行压缩、压缩和优化。我想在这一步中创建图像精灵

因此，在我的原始资源/文件夹中，我希望我的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插件，这是可能的吗

---

非常感谢

postsss名为postsss精灵的插件执行以下操作：

---

但是它不适用于矢量图形。

后来我决定用另一种方法处理矢量图形，所以这一种对光栅精灵非常有效。