Skip to content

iazrael/ispriter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

智能合并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 

体验实际效果

License

MIT