fis-spriter-csssprites

fis-spriter-csssprites

基于FIS的csssprites，通过FIS插件的方式对合并后的css进行csssprites处理。其支持repeat-x, repeat-y, background-position

安装

npm install -g fis-spriter-csssprites

配置

fis.config.merge({
    namespace: 'demo',
    modules: {
        spriter: 'csssprites' 
    },
    pack: {
        'aio.css': [
            '**.css'
        ]
    },
    settings: {
        smarty: {
            left_delimiter: '{%',
            right_delimiter: '%}',
        },
        spriter: {
            csssprites: {
                margin: 10
            }
        }
    }
});

使用

工具通过图片添加query识别图片是否需要做图片合并，具体

query	说明
?m=x	图片需要repeat-x时，通过?m=x来标识
?m=y	图片需要repeat-y时，通过?m=y来标识
?m=z	图片不需要任何重复时，通过?m=z来标识

###实例

.header {
    background: url(/img/head_bg.png?m=x) repeat-x;
}

.nav {
    background: url(/img/nav_bg.png?m=y) repeat-y;
}

.icon_add {
    background: url(/img/icon/add.jpg?m=z) no-repeat;
}

.icon_mul {
    background: url(/img/icon/mul.jpg?m=z) no-repeat;
}

如上，head_bg.png会合并到aio_x.png(aio.css对应图片), nav_bg.png合并到aio_y.png, add.jpg和mul.jpg被合并到aio_z.png。