Use grunt to generate sprites

As a front-end developer, implementing front-end automation is an effective means to greatly save development time;

In this way, developers can focus more on front-end code development, instead of focusing too much on CSS compression, JS

This is a tedious task.

This article describes how to use grunt to generate front-end sprites and generate corresponding CSS files,

• Install grunt, this part is not much said, the specific content refer to the http://www.gruntjs.net/

The grunt homepage details the installation steps and basic usage of grunt.

• After grunt is installed, the next step is to complete the basic configuration. The main task is to implement the package. JSON file,

And gruntfile. js file configuration.

• Configuration of package. JSON:

 1 { 2     "name": "grunt-spritesmith", 3     "description": "Grunt task for converting a set of images into a spritesheet and corresponding CSS variables.", 4     "version": "0.0.1", 5     "repository": { 6         "type": "git", 7         "url": "git://github.com/itec-primary/grunt-spritesmith.git" 8     }, 9 10     "engines": {11         "node": ">= 0.8.0"12     },13     "scripts": {14         "test": "cd src-test && grunt"15     },16     "dependencies": {17         "grunt-spritesmith": ">0.1.0"18     },19     "devDependencies": {20         "grunt": "~0.4.2"21 22     },23     "keywords": [24         "grunt",25         "sprite",26         "spritesmith"27     ]28 }

• After package. JSON is configured, configure gruntfile. js.

 1 module.exports=function(grunt){ 2     grunt.initConfig({ 3         pkg:grunt.file.readJSON("package.json"), 4         sprite:{ 5             options:{ 6                 banner:‘/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/\n‘ 7             }, 8             all:{ 9                 src:"sprite/*.png",10                 destImg:"spritesheet/spritesheet.png",11                 destCSS:"css/sprite.css",12                 algorithm:"binary-tree"13             }14         }15     });16     grunt.loadNpmTasks("grunt-spritesmith");17     grunt.registerTask("default",["sprite"]);18 };

 

Use grunt to generate sprites