基于fis的csssprite,支持repeat-x,repeat-x,background-position
npm install fis-spriter-csssprites基于FIS的csssprites,对css文件,以及html文件css片段进行csssprites处理。支持repeat-x, repeat-y, background-position 和 background-size
FIS 内置
#### 环境要求
0. 依赖native插件,images 环境需要符合这个插件的要求。(OS X、Windows、Linux x86 提供了二进制包)
0. 具体支持 Node 版本列表参见 https://github.com/zhangyuanwei/node-images/releases/tag/v3.0.1
0. 只能在 FIS(fis 2.x, fis3) 中使用
以下配置均使用 fis 2.x 的配置方式配置,如果使用 fis3 请按照 fis3 的配置方式,具体见官网 fis.baidu.com
* 首先要配置FIS中使用csssprites
``javascript`
fis.config.set('modules.spriter', 'csssprites');
* 合并后的css 文件会 自动 进行csssprites
`javascript`
fis.config.set('pack', {
//对合并的aio.css进行处理
'aio.css': [
'**.css'
]
});
* 如果有个别css文件没有合并,但是想进行csssprites处理,可以像下面这样配置
`javascript`
fis.config.set('roadmap.path', [{
reg: /\/static\/.*\.css$/i,
//配置useSprite表示reg匹配到的css需要进行图片合并
useSprite: true
}]);
* 如果想配置html中的css片段进行csssprites处理,可以像下面这样配置
`javascript
fis.config.set('settings.spriter.csssprites', {
//开启模板内联css处理,默认关闭
htmlUseSprite: true,
//默认针对html原生标签内的内容处理。
//用户可以通过配置styleTag来扩展要识别的css片段
//以下是默认标签的匹配正则
styleReg: /(