使用grunt生成雪碧图

来源：互联网发布：男士通勤包知乎编辑：程序博客网时间：2024/05/16 17:44

作为一名前端开发人员，实现前端自动化是一项大大节省开发时间的有效手段；

这样开发人员可以更好更专注于前端代码的开发，而不用过多关注于css压缩，js

检测这样的繁琐的工作。

　　本文主要介绍使用grunt实现前端雪碧图生成，以及生成相应的css文件，

安装grunt，这部分就不多说了，具体内容参考http://www.gruntjs.net/

grunt首页详细介绍了grunt的安装步骤以及基本的使用基础。

安装完成grunt后，下一步骤就是完成基本的配置工作，主要工作就是实现package.json文件，

以及Gruntfile.js文件的配置工作。

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 }

package.json完成配置后，然后实现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 };

长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你了解最新的前端技术。

0 0