FIS 雪碧图sprite合并

1 安装fis(必须先安装node和npm)：npm install -g fis3

 

2 构建项目发布到根目录下的output：fis3 release -d ./output

项目根目录：FIS3 配置文件（默认fis-conf.js）所在的目录为项目根目录。

 

3 sprite的配置文件(fis-config.js)以下：

fis.match('::packager', {
    spriter : fis.plugin('csssprites')
});

fis.match('*.css', {
    useSprite : true,
    optimizer : fis.plugin('clean-css')
});

fis.match('*.png', {
    optimizer : fis.plugin('png-compressor')
}); 

 

4 目录结构以下：

　　

 

5 运行命令行：fis3 release -d ./output。以后，就会在根目录多了一个output文件夹。以下图所示：

 

6 打开output文件夹，就可在css文件夹找到合并后的图片"test_z.png"。

 

提示：

1 output中的css文件，fis已经修改好了。包括引入"test_z.png"雪碧图以及background-position,background-repeat等都已修改好了。

2 由于fis在release的时候，有个"资源定位"的功能，因此，须要在output文件夹下的html中，改绝对路径改成相对路径。

 

 

参考：

http://fis.baidu.com/fis3/docs/beginning/intro.html