处理 css 文件生成精灵图

处理的文件类型

CSS

使用的 npm 插件

gulp-sprite-generator2

该插件基于 gulp-sprite-generator 拓展而成。

生成精灵图功能说明

css 语法：

width: 60px;
height: 60px;
background-image: url(../img/circle.png); /*同时支持 background 和 background-image*/

注意：在编写 CSS 的时候，图片宽高应固定，图片拼合后才能通过定位和显示区域的宽高来展示图片。如果布局时 width: 100%; background-position: center;，使用工具拼合图片后，该元素区域（100% 的宽度）内会将其他图片显示出来，这不是我们想要看到的。

使用示例：

style.css 处理前：

width: 60px;
height: 60px;
background-image: url(../img/circle.png); /*同时支持 background 和 background-image*/

style.css 处理后：

width: 60px;
height: 60px;
background-image: url("../image/style.sprite.png?v=3f4db78e"); /*相对路径可配置*/
background-position: -0px -186px;
background-size: 1000px 1200px!important;

同时会生成相应的 style.sprite.png 精灵图文件。

可选设置：

• 正则筛选想要处理的图片路径

如果你只想处理某个路径下的图片或者以某种规律命名的图片，可以通过正则来筛选。

• 精灵图文件名

默认会以 css文件名.sprite.png 的形式命名，css文件名 指的是当前正在处理的 css 文件的名称：style.css 中的 style。这意味着你可以一次性处理多份 css 文件。

• css 文件名

处理后的 css 文件可以自定义重命名。

• 生成的css中图片相对地址

因为可以自定义处理后的 css 和精灵图的导出地址，因此生成的 css 中图片相对 css 文件的相对地址也需要能够自定义，如：css 位于 /dist/css，精灵图位于 /dist/image，则相对地址应改为 ../image。

• 精灵图导出地址
• css 导出地址
• 是否压缩精灵图
• 是否压缩 css

更多

更多配置查看插件文档：gulp-sprite-generator / gulp-sprite-generator2，可以在 Splice 的源码中找到插件的使用位置直接修改代码，然后 Ctrl+Alt+R 刷新页面或者重新启动 Splice。