iazrael / ispriter Goto Github PK

View Code? Open in Web Editor NEW

262.0 22.0 58.0 4.14 MB

智能合并CSS精灵图

Home Page: http://imatlas.com/posts/ispriter-update/

License: MIT License

JavaScript 86.48% HTML 2.04% CSS 11.48%

ispriter's Introduction

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

ispriter's People

Contributors

Stargazers

Watchers

Forkers

yaoduren123 lovise filod jx0608 waterqiang heiniuhaha maisui99 bigrats teddylin lonjoy telfordniu missall dreamflywang jackie19 kaizhuqin ldjking linkwisdom jshi-git wumingli marswon yuqigong osdream miser chenbinqun williamtank winniebear kreding atgwwx nini111 chenyonghao zlbben jincdream sdtm1016 ckrad xiangpaopao killsos qjk1234 loopwang sdgdsffdsfff yiwei1223 lidianhao123 despire1119 chancedai moonye6 qxl1231 leamiko caesar73 bryant1410 lbjack txtsummer elfecho w1146869587 kshern cc8848 xiaopengmei reaink live0717

ispriter's Issues

增加支持百分比设置background-position的样式

支持对 background-position: 50% 这里的样式进行合并

支持retina屏

貌似目前都是按px 1:1处理的，请问暂时是不是不支持移动设备上2x的方式，后面有没有计划支持呢

智能给没有设置宽高的样式增加宽高

给没有设置宽高的 style 加上图片的宽高来做为样式宽高, 不能单纯的加, 要加上智能判断:当前上下文有没有相同的 selector 已经设置过宽高, 有就不能加

合并图片只能合并png格式

是否考虑支持jpg等格式的合并支持 [jpg, jpg...] -> xx.jpg 😄 :p

关于合并图片的建议

有没有可能合并后的图片采用写定位的方式把相应链接图片合并成一个比如:现在的方式;

div:nth-of-type(8) {width: 20px; height: 20px; background: url(./img/sprite_main_1.png) -268px -106px;}
div:nth-of-type(9) {width: 79px; height: 18px; background: url(./img/sprite_main_1.png) -84px -212px;}
div:nth-of-type(10) {width: 16px; height: 16px; background: url(./img/sprite_main_1.png) -268px -131px;}

新的方式:

div:nth-of-type(8),div:nth-of-type(9),div:nth-of-type(10) {background: url(./img/sprite_main_1.png) no-repeat;}
div:nth-of-type(8) {width: 20px; height: 20px; background-position:-268px -106px;}
div:nth-of-type(9) {width: 79px; height: 18px; background-position: -84px -212px;}
div:nth-of-type(10) {width: 16px; height: 16px; background-position: -268px -131px;}

这样会不会好一些.总觉得写一堆一样的图片链接地址有些累赘.

    background-image: -owg-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
    background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));
    background-image: linear-gradient(top, transparent, rgba(0, 0, 0, 0.5));

ispriter会只保留一个background-image

function readImageInfo(fileName, callback){
    fileName = path.join(spriteConfig.workspace, fileName);
    fs.createReadStream(fileName).pipe(new PNG())
    .on('parsed', function() {
        console.log('parsed')
        ...
    })   
    ... 
}

这里是我的配置

var spriteConfig = { 
    'workspace': './',
    'input': {
        'cssSource': './asset/css/index.css'
    },  
    'output': {
        'cssDist': './asset/css/dist/',
        'imageDist': './asset/image/sprite/'
    }   
};

可以支持分组吗

可以对sprite进行分组吗