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