来自 background-image url 的图像 sprite，没有预处理器、mixins、watchers 等等

Question

我想将我项目中的图标连接成一个单独的精灵图像。我找到了一些解决方案，但所有解决方案都需要使用 css 预处理混合或我原始 CSS 代码中的某些内容。我想要的是尽可能少地使用技术和库。

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

resources/
public/

两者结构相同：

images/
layouts/
scripts/
styles/
...

我在 resources/ 文件夹中工作。我正常写HTML,CSS,JS。我从 Photoshop/Sketch 剪切图像时将它们存储在那里。我在浏览器中打开此文件夹中的 HTML 文件，一切正常。所有资源均未压缩且未优化。我不使用任何预处理器或观察器。

当我完成工作或部分工作时，我会运行 GULP 使用一些插件。它将所有资源复制到 public/ 文件夹中并压缩、合并、优化它们。我想在此步骤中创建图像精灵。

所以在我原来的 resources/ 文件夹中，我希望我的 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);
}

它会让我正常工作。我可以在页面上看到图像而无需编译。只需在浏览器中编写代码并刷新页面即可。

当我完成工作后，我想像这样看到我的 public 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

但它不适用于矢量图形。

来自 background-image url 的图像 sprite，没有预处理器、mixins、watchers 等等

Image sprite from backgound-image url without preprocessors, mixins, watchers an so on

html

css

svg

sprite

gulp