Auto CSS Sprite in Node.js
JavaScript CSS Makefile
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
src
tests
.coveralls.yml
.gitattributes
.gitignore
.npmignore
.travis.yml
Makefile
README.md
appveyor.yml
gulpfile.js
index.js
intro.png
package.json

README.md

sprites

css auto sprites

NPM version Build Status Coverage Status Dependency Status

INSTALL

npm install sprites

intro

特性

  • sprites自动分析传入css文件列表中的background部分,根据一定规则匹配出所有的背景图将之合并,即自动雪碧图
  • 解析语法树进行识别,保证准确性
  • 区分不同的图片格式,包括png8和png24
  • 区分高清图,即1倍和2倍
  • 提供底层接口,返回合并后的图片二进制数据,存储由应用层自己控制
  • 中文编码,ES6书写,转换为ES5

使用说明

  • 构造器传入css列表
  • 调用解析方法获取拼好的二进制图像数据
  • 存储好图像后调用替换方法传入图像url
  • 获得其返回生成的css内容列表

API

Sprites

  • constructor(css列表:Array<Object>, 根路径:String = '', 间距:int = 10) 传入需要解析的css列表,可选根路径和图片拼接间距
[{
  "路径": String,
  "内容": String = null
}]
  • 解析():Array<Object> 解析css列表,提取background部分,返回拼好的图片列表数据
    • 仅识别background缩写,分开的background-image将忽略
    • 前缀hack(如:-background)将忽略
    • background的url值为base64、线上地址时将忽略
    • background设置了position时将忽略
    • 此选择器的width/height为0时将忽略
    • 未设置width/height或不为px时将读取图片高宽
    • 图片如果是相对根路径,必须提供根路径配置
[{
  "图像": Buffer,
  "后缀": String
}]
  • 替换(url列表:Array<String>):Array<String> 在解析的基础上,将存好的图片的url数组传回,替换掉原css中的引用,索引按解析()方法中的返回顺序
  • 读根路径():String 返回根路径
  • 写根路径(根路径:String):void 设置根路径
  • 读间距():String 返回间距
  • 写间距(间距:int):void 设置间距

静态属性

  • 添加关键字(关键字:String/Array<String>):void 当底层css解析器无法识别新增的css样式关键字时,用此方法添加