Use grunt to automatically generate sprite graphs for background images in CSS

The system developed by the company is b/s architecture, when users use the browser to access the system, the browser comes with tools to view, the number of requests for pictures, many for small pictures.

Today want to improve the status quo, on-line to find a sprite plan, in fact, the use of a lot of small pictures of the tool to make a large picture, and then reference the CSS in the big picture, and specify the display of a certain area of the picture, but this program needs to work a lot of hands processing.

So it is possible to use the current more mature grunt on the front-end style files automatically processed, automatically generate sprite chart, automatically modify style files. A search sure did find the scenario, below is a fragment of the Gruntfile.js file:

Module.exports = function (Grunt)  {  // Project configuration.   Grunt.initconfig ({    //  auto Sprite Chart     sprite: {       options: {        //  map the background path in CSS, Support functions and arrays, default to  null        imagepath_map: null,         //  spacing between pictures, if set to odd, will force +1 to ensure that the resulting 2x image is even width, default  0         padding: 0,        //  whether to use  image-set  as a 2x image implementation, the default is not to use         useimageset: false,         //  whether to generate a new sprite file with a timestamp for the file name, and if enabled, note that the file generated before the cleanup is not generated by default          newsprite: false,         //  add time stamp to sprite chart, default not append         spritestamp: true,        //   Append a timestamp to the end of the CSS file, not append by default         cssstamp: true,         //  two fork tree optimal permutation algorithm by default          algorithm:  ' Binary-tree ',        //  uses the ' pixelsmith ' image processing engine by default         engine:  ' Pixelsmith '       } ,       sprite_module1: { //only automatically generate sprite maps for Module1 catalogs          options : {           // sprite Background Map source folder, only matching this path will be processed, default  images/slice/           imagepath:  ' module1/images/',           //   Sprite Output directory, note that it will overwrite the previous file! Default  images/          spritedest:  ' module1/images/'          },        files: [{           //  Enable dynamic expansion            expand: true,          //  CSS File source folder           cwd:  ' module1/',           //  Matching Rules            src: [' **/*.css ',  '!**/*.sprite.css '],           //  export paths to CSS and sprites address           dest:  ' Module1 /',          //  exported CSS name            ext:  '. Sprite.css ',          extdot:  ' last '         }]      }     }  });    //  loads the plug-in that contains   "Sprite"   tasks.   // grunt.loadnpmtasks (' Grunt-css-sprite ');  // Because the sprite you want to generate is the. Sprite.png end, the original grunt-css-sprite made some changes, and then manually loaded Grunt_tasks  grunt.loadtasks (' Grunt_tasks ') ;   grunt.registertask (' Default ',  [' Sprite ');};

Package.json:

{"name": "XXX", "version": "x.x.x", "devdependencies": {"grunt": "0.4.5", "async": "0.9.0", "Spritesmith": " 1.3.0 "}}

The GRUNT_TASKS directory structure is as follows:

which

Sprite.js from the Https://github.com/laoshu133/grunt-css-sprite project.

Css-spritesmith.js, Imagesetspritecreator.js, Place_after.png, place_before.png from https://github.com/laoshu133/ Css-spritesmith project, but modified the css-spritesmith.js file .

... slicedata.timestamp = Options.spritestamp? TimeNow: "Slicedata.timestamp = Options.spritestamp?" (‘?‘ +timenow): '; slicedata.imgdest = Fixpath (Path.join (options.spritedest, Cssfilename + '. Sprite.png ')); slicedata.spriteimg = Fixpath (Path.join (Options.spritepath, Cssfilename + '. Sprite.png ') + Slicedata.timestamp; Slicedata.retinaimgdest = Fixpath (SliceData.imgDest.replace (/\.png$/, ' @2x.sprite.png '));  slicedata.retinaspriteimg = Fixpath (Path.join (Options.spritepath, Cssfilename + ' @2x.sprite.png ') + Slicedata.timestamp, .....

Use grunt to automatically generate sprite graphs for background images in CSS