前端开发工具介绍----合成雪碧图工具（css sprite）

合成雪碧图Sprite工具

1.国外的在线合成工具：http://csssprites.com/

选择需要合并的文件----设置option选项（包括：元素的间距，排列方式，背景颜色，边框）-----点击generate按钮生成

优点：自动合成，可以设置属性。缺点：文件必须一个个地去选择导入，不能够批量导入。

 

2.腾讯的雪碧图在线生成工具http://alloyteam.github.io/gopng/

个人觉得操作不太方便，好像有些功能失灵了，相关操作说明如下：https://github.com/AlloyTeam/gopng

 

3.SpriteMe

这是一个国外的在线工具，它能够帮你分析页面中有哪些地方可以进行雪碧图的优化，并且能够生成对应的雪碧图。http://spriteme.org/

使用方法：

打开连接http://spriteme.org/，看到下图内容，然后把SpriteMe拖拽到你的浏览器书签中（就是要你保存为书签嘛）

然后随便打开一个页面。例如打开360导航页面吧，http://www.3600.com/?src=lm&ls=n020f881c88。然后在该页面上打开你的书签找到SpriteMe并点击它。

你会看到生成这样一个结果。这是SpriteMe的检测结果，对这个页面给出的雪碧图优化建议。鼠标移到每个链接上都能看到自动合成的效果，点击右边的make sprite可以马上生成雪碧图。点击export css可以生成雪碧图的样式。

 

4.如果你是写sass的话，那么可以安装compass。使用compass来自动把切片合成雪碧图并生成样式。

 

5.如果你是写sass或者less的话，比较建议使用grunt自动工具来一体化地编译、压缩、合并文件，而且能够自动合成雪碧图、生成样式文件。

使用grunt来合成雪碧图需要使用grunt-sprite这个插件（好像在github上也有另一个类似的插件）,同时需要安装Graphics Magick(gm) 和 PhantomJS 两个依赖。

至于如何使用，这里有个详细的说明：https://github.com/hellometers/grunt-sprite

 

转载于:https://www.cnblogs.com/joyho/articles/3715260.html