spritesify-cli
v0.3.0 css sprites sprites png combo img
spritesify
png 图标自动合并工具
安装
npm install spritesify-cli -g
基本的目录结构
[运行目录]
├── spritesify/
│ ├── 40~icons40/
│ │ ├── 1.png
│ │ ├── 2.png
│ │ └── 3.png
│ └── ~normal/
│ ├── 4.png
│ ├── 5.png
│ ├── 6.png
│ └── 7.png
└── common.css
- 创建一个名为
spritesify
的目录 - 在目录
spritesify
中, 子目录以(size)~(class)
的形式命名
左侧 size
表示 png 图片的尺寸,右侧是生成的 css 中对应的 class 名称
如果你有一组相同尺寸的图标,推荐设置 size
,这样可以使你的图片结构更加清晰,例如:
16~icona
表示生成的图片是 16 像素序列的 icona.png
,对应的 class 为 .icona-*** {}
如果你的图片尺寸不固定,那么 size
可以省略(或设置为 0),只设置 class
即可,如:
~pica
或 0~picb
因此:
- 40*40 的 png 图标放入
40~somename
目录中 - 其它不同尺寸的图标放入
~othername
目录中
当使用 spritesify
编译时,将会生成 icona.png / pica.png.
用法
spritesify <pngSourcePath> -o <cssPath> -u <httpUrl>
- pngSourcePath:运行目录(指
spritesify/
目录) - cssPath:索要生成或合并的 css 文件路径,如果不需要写入 css,该项请传入
''
- httpUrl:需要设置的
http
全路径,如果不需要全路径,该项传入''
spritesify ./spritesify/ -o ../css/style.css
HTML 用法
<span class="normal normal-4"></span>
<span class="icons40 icons40-1"></span>
示例
合并小图标,并写入 ./common.css
命令:
spritesify ./ -o ./common.css
结果:
[run]
├── spritesify
│ ├── 40~icons40
│ │ ├── 1.png
│ │ ├── 2.png
│ │ └── 3.png
│ └── ~normal
│ ├── 4.png
│ ├── 5.png
│ ├── 6.png
│ └── 7.png
├── common.css
├── icons40.png
└── normal.png
打开 ./common.css, 可以看到生成的图标css已经插入到文件中:
/*====spritesify:normal====*/
.normal {
display: inline-block;
background-image: url("./normal.png");
background-repeat: no-repeat;
background-size: 370px 300px;
vertical-align: middle;
overflow: hidden;
}
.normal-4 {
width: 200px;
height: 300px;
background-position: 0px 0px;
}
.normal-6 {
width: 20px;
height: 200px;
background-position: -200px 0px;
}
.normal-5 {
width: 150px;
height: 80px;
background-position: -220px 0px;
}
/*====/spritesify:normal====*/
/*====spritesify:icons40====*/
.icons40 {
display: inline-block;
background-image: url("./icons40.png");
background-repeat: no-repeat;
background-size: 120px 40px;
width: 40px;
height: 40px;
vertical-align: middle;
overflow: hidden;
}
.icons40-1 {
background-position: 0px 0px;
}
.icons40-2 {
background-position: -40px 0px;
}
.icons40-3 {
background-position: -80px 0px;
}
/*====/spritesify:icons40====*/
在 HTML 中,我们可以这样使用:
<span class="normal normal-4"></span>
<span class="icons40 icons40-1"></span>
合并,并设置图片的 url 地址为 http://www.site.com
命令:
spritesify ./ -o ./common.css -u http://www.site.com
结果:
...
background-image: url("http://www.site.com/normal.png");
...