Grunt Batch lossless compression picture plug-in--grunt-sprite

What is it

This is a tool that helps front-end development engineers combine tiles from CSS code into sprite diagrams, and its main functions are:

1. Using the two-tree arrangement algorithm, the CSS file is processed, the slice sequence is collected, and the sprite graph is generated.
2. Add the Background-position property to the slice in the original CSS code
3. Generate HD Sprite for HD devices and append media query code at the end of the CSS file
4. Timestamp the location where the sprite map was referenced
5. Append a timestamp to the end of a style

Installation dependencies

grunt-spriteUsing Spritesmith as the internal core algorithm, it is necessary to install the graphics Magick (GM) and PHANTOMJS two dependencies according to the basic dependencies mentioned in the official documentation.

• Graphics Magick (GM)

  GraphicsMagickTo grunt-sprite provide a framework for image processing, install the method:

  • Mac

      // 安装GM图形库      

  • Windows

    Go to the official website to download and install the GM graphics library

• Phantomjs

  PhantomJSTo spritesmith provide support for CSS selectors and JSON, install the method:

  • Mac

      // 安装 Phantomjs  brew install phantomjs

  • Windows

    Go to the official website to download and install Phantomjs

Configuration Instructions

 //Auto Sprite Sprite: {allslice: {files: [{//Enable dynamic expansion  Expand:true,//CSS File source folder cwd: ' CSS ',//matching rule src:                  [' *.css '],//export CSS and Sprite path address dest: ' tmp/',//exported CSS Name                        Ext: '. Sprite.css '}], Options: {//default using the GM image processing engine                        ' Engine ': ' GM ',//default using two fork tree optimal permutation algorithm ' algorithm ': ' Binary-tree ',                        Add time stamp to sprite chart, default not append ' Imagestamp ': false,//append timestamp to style file, default not append ' Cssstamp ': true,//whether to generate a new sprite file with a timestamp for the file name, default does not generate new Sprite ': True}}}  

• Files

  Using a standard dynamic file object

  destSpecify an output directory where one and one directory will be created under this directory css/ sprite/ .

• Options

  • engine

    Required, specify the image processing engine, select the GM

  • algorithm

    Required options, specify the arrangement, with (top to bottom), (from left to right), (from top left to right) top-down , (from bottom left to right) left-right diagonal alt-diagonal and binary-tree (binary tree arrangement) five options.

  • imagestamp

    Optional, if you want to append a timestamp to Sprite, do not append by default

  • cssstamp

    Optional, whether to append a timestamp to the style file, not append by default

  • ' Newsprite '

    Optional, whether to generate a new sprite file with a timestamp for the file name, no new file is generated by default

Load Plug-in

Please do not forget to load the plug-in

Make an analogy.

There is a directory structure similar to this:

    ├── test                        ├── css/                └── icon.css                ├── slice/                  ├── icon-a.png                ├── [email protected]                       ├── icon-b.png                └── [email protected]        └── publish            ├── css/                └── icon.sprite.css            └── sprite/                 ├── icon.png                └── [email protected]

css/icon.cssThe slice/ tiles under the call directory grunt-sprite will be css/icon.css processed.

Generated in the publish/ directory css/ and sprite/ two directories, the css/ directory is the completion of the style of processing icon.sprite.css , and the sprite/ directory is the completion of the sprite map icon.png .

Special attention

1. The CSS file is placed css/ in a folder, the slice file slice/ is placed in a folder, css/ and is in a slice/ sibling.
2. css/and slice/ directories are not necessarily in the project root directory
3. Theoretically all slices should be of a .png format, png8 png24 and no png32 limit
4. Theoretically, HD slices should be twice times the size of the source tile, so all HD slices must be of even size and height
5. The generated sprite will be named after the source CSS file name

Grunt Batch lossless compression picture plug-in--grunt-sprite