百度fis2 添加雪碧合成功能，前提是要先安装一个插件：node-images。
具体命令行为：
$ npm install images添加配置代码
1.首先要配置FIS中使用csssprites
fis.config.set('modules.spriter', 'csssprites');
2.合并后的css 文件会 自动 进行csssprites
fis.config.set('pack', {
//对合并的aio.css进行处理
'aio.css': [
'**.css'
]
});
3.如果有个别css文件没有合并，但是想进行csssprites处理，可以像下面这样配置
fis.config.set('roadmap.path', [{
reg: /\/static\/.*\.css$/i,
//配置useSprite表示reg匹配到的css需要进行图片合并
useSprite: true
}]);
4.如果想配置html中的css片段进行csssprites处理，可以像下面这样配置
fis.config.set('settings.spriter.csssprites', {
//开启模板内联css处理,默认关闭
htmlUseSprite: true,
//默认针对html原生<style></style>标签内的内容处理。
//用户可以通过配置styleTag来扩展要识别的css片段
//以下是默认<style></style>标签的匹配正则
styleReg: /(<style(?:(?=\s)[\s\S]*?["'\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig
//**styleReg规则**
//1. 默认不配置styleReg，仅支持html中默认style标签中的css内容
//2. 配置styleReg时候，仅支持styleReg匹配到的内容。
//3. styleReg正则必须捕获三个分组，
// $1为：开始标签（start tag），
// $2为：内容(content) ,
// $3为：结束标签(end tag)
});
自定义雪碧图片
默认值：
{
margin : 3,
layout : 'linear',
width_limit : 10240,
height_limit : 10240
}选项：
margin：图之间的边距，单位像素。
layout：布局算法，默认是 ‘linear’，图片垂直布局，水平方向无需 遮盖处理 。可选项还有 matrix，图片矩阵布局，面积最小化，但需要提供额外的dom控制水平方向图片的遮盖处理
注意：使用csssprite需要满足以下条件
使用release命令时，添加 -p 或者 --pack 参数。由于csssprite处理需要消耗一定的计算资源，并且开发过程中并不需要时刻做图片合并，因此fis将其定义为打包处理流程，启动csssprite处理需要指定–pack参数。
只有 打包的css文件 或者 roadmap.path 中 useSprite 属性标记为 true 的文件才会进行csssprite处理，因此请合理安排要进行csssprite处理的文件，尽量对合并后的文件做处理。
在css中引用图片时，只要加上 ?__sprite 这个query标记就可以使用csssprite了。详情请参考fis-spriter-csssprites插件的 使用文档。
用法：
//使用矩阵布局
fis.config.set('settings.spriter.csssprites.layout', 'matrix');
或者
//使用矩阵布局
fis.config.merge({
settings : {
spriter : {
csssprites : {
layout : 'matrix'
}
}
}
});至此就可以通过打包生成CSS雪碧图片来压缩，配合图片压缩插件
optimizer.png-compressor
- 项目：https://github.com/fis-dev/fis-optimizer-png-compressor
- 解释：png图片压缩器运行配置。fis团队将
pngquant和pngcrush两个优秀的png图片压缩工具移植为nodejs的原生扩展（node-pngcrush与node-pngquant-native），相比同类型工具采用进程调用的方式更高性能，压缩速度更快。 - 值类型：
Object - 默认值：无
- 选项：
type：选择压缩器类型，默认是 ‘pngcrush’，可选值为 ‘pngquant’，pngquant会将所有png24的图片压缩为png8，压缩率极高，但alpha通道信息会有损失。
- 用法：
//使用pngquant进行压缩，png图片压缩后均为png8 fis.config.set('settings.optimizer.png-compressor.type', 'pngquant');或者
//使用pngquant进行压缩，png图片压缩后均为png8 fis.config.merge({ settings : { optimizer : { 'png-compressor' : { type : 'pngquant' } } } });
以下是我的一个配置：
文件都放在dev中，输入到dest中。配置放在dev中。
fis.config.merge({ project : { charset : 'gbk' //设置项目的编码 }, namespace: 'csssprites', modules: { spriter: 'csssprites' }, roadmap: { path: [ { reg: '**.png' // query: '?t=123124132' }, { reg: '**.css', // release: '.css' //配置产出路径 useSprite: true }, { reg: '**.html', useSprite: true } ] }, // pack: { // '/aio.css': '**.css' // }, settings: { spriter: [{ margin: 10, //矩阵排列方式 // scale: 0.5, layout: 'matrix', width_limit : 10240, height_limit : 10240 }], optimizer: { "png-compressor": { type: 'pngquant' } } } });
