Ispriter Automatically build Css-sprite

Optimize your site:

When a site of resources (such as: JS files, CSS files, pictures, etc.) will inevitably affect user access speed, this time you need to do site performance optimization, you can choose to separate resources on different servers, because a resource server can download up to 2-3 resources at the same time, Multiple servers will be able to download multiple files at the same time, but this will bring financial problems to the company. It is common for everyone to think of compressing and merging resource files, which can be built using tools or automatically. Today I'm talking about automatically building a compressed CSS file, merging pictures:

Ispriter is a very good node-based toolkit that supports CSS merge compression and image merging:

Characteristics:

Intelligent extraction of background URLs and position information

Smart settings are merged with the width height of the picture

Smart judgment uses background-position (px) to position the image and reposition it

Supports merged sprites to merge and locate again

Support Image to weight

Support for restricting the size of merged pictures

Support to set picture spacing after merging

Supports merging all images into one, while all CSS files are merged into a single file

Support for reading @import style sheets for processing

Supports the unified output of all CSS merged with the image, reducing the amount of code

Supports compression of output CSS (using CLEAN-CSS)

Support for excluding images that do not need to be merged (add #unsprite after URL or configure with config file)

Skip Background-position is a picture of Right/center/bottom

Skip the explicit settings tiling mode for repreat pictures

Skip setting up a picture of background-size

Configuration file:

Config.json

{/** * working directory, can be relative path or absolute path * * @optional * @default the directory where the Ispriter command was run * @example * "./": When Pre-run directory, default value * ".        /": Upper level of current directory *"/data ": The Data directory under the root directory *" D:\\sprite ": the sprite directory under D disk */" workspace ":"./"," input ": {         /** * Original Cssroot * need to do sprite map merge css file path or file list, single time use string, multiple when using array. * Path can be written using ant-style path * * @required * @example * "Csssource": ".         /css/"; * "Csssource": ["]. /css/style.css ",". /css2/*.css "] */" Csssource ": ["./style/*.css "],/** * Exclude images that you do not want to merge, you can use wildcards * or directly in CS         s file, add #unsprite after the image URL you don't want to merge, Ispriter will exclude the picture and delete the #unsprite * * @optional * @example  * "Ignoreimages": "icons/*" * "ignoreimages": ["icons/*", "loading.png"] *///"Ignoreimages":       ["*logo.png"],/** * Output of the sprite chart format, currently only support output PNG format, * if it is other format, is also exported in PNG format, only the suffix is changed to the specified suffix *   * @optional * @default "png" */"format": "PNG"}, "Output": {/** * original CSS After the root * Sprite map is merged, the output directory of the CSS file * * @optional * @default "./sprite/css/" * * "          Cssdist ":"./css/",/** * Original imageroot * generated sprite diagram relative to the cssdist path, will eventually become the merged picture path written in the CSS file * * @optional * @default "./img/" * @example * If you specify Imagedist as "./images/sprite/", the output of CS         s will appear as * Background:url ("./images/sprite/sprite_1.png"); * */"imagedist": "./img/",/** * Original maxSize * Maximum size of single Sprite, per KB, * If the diagram after merging The size of the slice exceeds maxsinglesize, the image will be split * * @optional * @default 0 * @example * if specified "Maxs Inglesize ": 60, while the generated sprite graph (sprite_all.png) has a capacity of 80KB, * will split the sprite diagram into Sprite_0.png and sprite_1.png two * *  /"Maxsinglesize": 0,/** * After synthesis, the space between pictures, unit px       * * @optional * @default 0 * * "margin": 3,/** * Configure the prefix of the generated sprite map          * * @optional * @default "sprite_" */"prefix": "Sprite_",/** * Sprite graph output format * * @optional * @default "png" */"format": "PNG",/** * Configure whether all fine         The Turing merge becomes a piece that can be used when a lot of CSS files are entered.         * True when all pictures are merged into one, and all CSS files are merged into a single file. * Note: The maxsinglesize is still in effect at this time, the picture will be split when the limit is exceeded * * @optional * @default false */"comb Ine ": false,/** * Configure whether to combine the picture's style into a single rule, unified settings background-image, for example: *. CLS1,. cls2{* b         Ackground-image:url (XXX); *} * * @optional * @default true */"Combinecssrule": true,/** *          To configure whether to compress the CSS file, use CLEAN-CSS for compression, with the following values: * False: Do not compress;          * true: Compressed with Clean-css's default configuration; * object{"Keepbreaks": true,...}: Compress with the specified configuration. * * @optional * @default false * * "compress": false}}

Operation Steps:

First step, install node, official website: http://nodejs.org/

Step two, install the Ispriter package, NPM install Ispriter-g

The third step, the current directory runs Ispriter-c Config.json

At this point, there will be more than one file, there are CSS files and the merged image file.

More information: Https://github.com/iazrael/ispriter

Ispriter Automatically build Css-sprite