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