imweb_ispriter2
v0.5.0
Published
an intelligent merge sprite tool
Downloads
2
Readme
#智能合并CSS精灵图(iSpriter)
什么是智能?
编写 css 文件时什么都不用管, 该用什么图片用什么图片, 该怎么定位就怎么定位, 不用改变原有的 css 编写方式
发布前执行 ispriter, 所有合并图片和定位都自动帮你完成
站在巨人的肩膀上
使用nodejs实现, 依赖CSSOM, node-pngjs
使用 bin-packing 算法排列图片, 后续支持选择其他算法
在此, 感谢这些开源项目的作者, 以及给本项目贡献代码的同学
特性
- 智能提取 background 的 url 和 position 等信息
- 智能设置被合并图片的宽高
- 智能判断使用了 background-position(使用px为单位)定位的图片并重新定位
- 支持已经合并了的精灵图再次合并和定位
- 支持图片去重
- 支持限制合并后图片的大小
- 支持设置合并后的图片间距
- 支持将所有图片合并为一张, 同时所有 CSS 文件合并为一个文件 【新】
- 支持读取 @import 的样式表进行处理 【新】
- 支持将所有合并了图片的 CSS 统一输出, 减少代码量 【新】
- 支持对输出的 CSS 进行压缩(使用 clean-css)【新】
- 支持排除不需要合并的图片(在 url 后面添加 #unsprite 或者使用 config 文件来配置)【新】
- 跳过 background-position 是 right/center/bottom 的图片
- 跳过显式的设置平铺方式为 repreat 的图片
- 跳过设置了 background-size 的图片
使用方法
config 的详细参数说明见CONFIG
config 文件的配置参数
{
"input": {
/**
* 原 cssRoot
*/
"cssSource": ["./css/style*.css"]
},
"output": {
/**
* 原 cssRoot
*/
"cssDist": "./sprite/css/",
/**
* 原 imageRoot
*/
"imageDist": "./img/",
/**
* 原 maxSize
*/
"maxSingleSize": 60,
"margin": 3
}
}
config 的最简配置
{
"input": "./../test/css/", // input cssSource
"output": "./../test/sprite_output/css/" // output cssDist
}
从代码中调用
var spriter = require('ispriter');
spriter.merge('../src/config.example.json');
or
spriter.merge(['./css/style.css', './css/style2.css']);
or
spriter.merge({
"input": "./../test/css/",
"output": "./../test/sprite_output/css/"
});
从命令行调用
npm install ispriter -g
cd ./test
ispriter -c config.example.json
or
ispriter -f style.css, style2.css ...
从 Mod 中调用
// Modfile
module.exports = {
plugins: {
sprite: "ispriter"
},
tasks: {
sprite: {
page1: {
"input": "./../test/css/", // input cssSource
"output": "./../test/sprite_output/css/" // output cssDist
},
page2: {
// 涉及对象类型参数需配置在options中
options: {
"input": {
"cssSource": ["./css/style*.css"]
},
"output": {
"cssDist": "./sprite/css/",
"imageDist": "./img/",
"maxSingleSize": 60,
"margin": 5
}
}
}
}
}
}
排除不需要合并的图片
只要在写样式的时候, 在 background-image 的图片url加上 #unsprite 即可, 例如:
background: url(../images/loading.png#unsprite);
background: url(../images/loading.png?t=123#unsprite);
background: url(../images/loading.png#hash#unsprite);
也可以在 config 中指定 ignoreImages 来实现, 所有匹配上的图片都不会合并, 可以使用通配符, 例如:
"ignoreImages": "icons/*"
"ignoreImages": ["icons/*", "loading.png"]
Example
具体实例请查看 examples 目录下的 demo, 进入具体目录, 执行
ispriter -c config.json
体验实际效果