iazrael / ispriter Goto Github PK

可以对sprite进行分组吗

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

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

比如有个background: #ccc;有个background: gradient;合并后background: #ccc不见了.只剩下gradient

这个问题倒是蛮奇怪的，我这里就没成功过，在创建文件读取流的之前我打印出图片的地址，那个文件的确是存在的，但是确不触发这个parsed的事件，代码如下

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/'
    }   
};

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

合并之后 图片定位会不正确

因为在制作序列帧动画时，这个功能尤为重要

rt

如指定 img1,img2,img3合并到 sprite1
img4,img5,imh6合并到sprite2

    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

https://github.com/sliuqin/peaches

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

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;}

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

我想应用在移动项目上，单位是rem，不知道直接将px替换为rem是否可行？如何修改？

background: white url('http://qplus3.idqqimg.com/qun/portal/img/r-arr.png') no-repeat 415px center;

合并后 415px 丢了

希望能增加对.less 文件的支持

RT, https://github.com/miser/grunt-ispriter
目前比较粗糙，之后会陆续完善

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

gif图好像不能合，现在只能合并png图吗？

另外，如果合并单独几个图片为一张，命令应该怎么写呢。