soundasleep/spritify

一个用于生成精灵图的CSS处理器

维护者

详情

github.com/soundasleep/spritify

主页

源代码

问题

安装: 186

依赖: 0

建议者: 0

安全: 0

星星: 0

关注者: 3

分支: 1

开放问题: 1

0.4.1 2015-01-05 03:32 UTC

Requires

  • php: >=5.2.3

Requires (Dev)

GPL-3.0 53a817613e0927d2e68e6f9cba210252a706e164

cssbuildspritespngspritesheet

This package is auto-updated.

Last update: 2024-09-14 09:10:58 UTC

README

一个简单的PHP脚本，可用于处理CSS样式表，执行一些基本优化，并生成该样式表中所有精灵的精灵图。

注意 该项目非常实验性 - 欢迎自由报告任何问题或错误。

需求

PHP，GD库（apt-get install php5-gd）

功能

  • 设计为直接插入现有项目，无需进行重大CSS更改
  • 移除CSS注释
  • 移除大部分不必要的空白
  • 从小于给定大小（默认32x32）的PNG图像生成精灵图
  • 支持@media查询
  • 支持全透明PNG图像
  • 通过background-size支持高分辨率精灵缩放
  • 使用x-background-sprite: false;禁用针对单个规则的spritify 精灵图

安装

在项目的composer.json中将spritify作为需求项包含，并运行composer update以将其安装到项目中

{
  "require": {
    "soundasleep/spritify": "dev-master"
  }
}

然后您可以使用spritify作为构建脚本的一部分

php -f vendor/soundasleep/spritify/spritify.php --input default.css --png img/all_sprites.png --output default-compiled.css

您还可以在Gruntfile中使用新的grunt-contrib-spritify任务。

例如，CryptFolio使用Spritify将此样式表转换为压缩样式表，带有PNG精灵图。

限制

  • 输入CSS必须是有效的。
  • 使用非常基本的正则表达式，因此会失败，包含分号（;）的字符串，且不支持Unicode。
  • 仅支持PNG图像的精灵图，不支持GIF。
  • 输出CSS文件必须与输入CSS文件位于同一目录中。
  • 所有图像都需要是相对的，并且相对于CSS文件是可访问的（没有Apache Aliases等）。
  • 尚未测试@media查询内的精灵图。
  • 假设背景图像是以下格式之一
    • background: #123 url('foo');（颜色作为另一个属性'background-color'添加）
    • background: url('foo');
    • background-image: url('foo');
    • background: url('foo') 0 0;
    • background: url('foo') 10px 20px;
    • background: url('foo') top 10px;
    • background-size: 16px 16px;
  • 以下不支持
    • background: #123 url('foo') bottom right;（所有其他单词都假设为'top left'）
    • background: #123 url('foo') center center;（对对齐'center center'的某物被忽略）
    • background: url('foo') 0% 0%;
    • background: url('foo') 50% 100%;
    • background-size: 100%;
    • background-size: contain;

测试

提供了非常基本的测试，使用phpunit。这些测试的源代码可在tests/中找到。

composer install
vendor/bin/phpunit

另请参阅