FIS Snow Sprite Sprite Merge

1 Installing FIS (node and NPM must be installed first): NPM install -g fis3

2 Build project published to the root directory of Output:fis3 Release-d./output

Project root directory: The directory where the FIS3 configuration file (default fis-conf.js ) is located is the project root directory.

The 3 sprite configuration file (Fis-config.js) is as follows:

Fis.match ('::p Ackager ', {    spriter:fis.plugin (' Csssprites ')}); Fis.match (' *.css ', {    usesprite:true,    Optimizer:fis.plugin (' Clean-css ')}); Fis.match (' *.png ', {    

4 The directory structure is as follows:

　　

5 Run the command line: Fis3 release-d./output. After that, you will have an output folder in the root directory. As shown in the following:

6 Open the output folder, you can find the merged picture "Test_z.png" in the CSS folder.

Tips:

1 The CSS file in output, FIS has been modified. Including the introduction of "Test_z.png" Sprite diagram and Background-position,background-repeat, etc. have been modified.

2 because the FIS in release, there is a "resource positioning" function, so, in the output folder under the HTML, change the absolute path to a relative path.

Reference:

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

FIS Snow Sprite Sprite Merge