简单的移动端css切片图合成工具
nodejs
GraphicsMagick 下载地址: http://www.graphicsmagick.org/
python 下载地址: https://www.python.org/
compass+ruby+sass
1.将原型图片进行处理,需要合成的图片目录images/icons/,输出到images/slice/目录下
images/icons/目录存放2x原型图片
images/slice/目录生成1x,2x图片
2.使用gm工具进行图片缩放
3.使用gulp+gulp-css-spritersmith插件 进行css代码片段的图片合成
4.输出目录publish/
1.不需要更改原来的css文件代码
2.可以配置需要合成的图片源路径,比如:images/icons
3.自动添加media query 移动设备查询代码片段,适应不同的屏幕材质(比如retina)
1.需要手动输入源切片图的css代码:
1 |
|
1 |
|
下载zip后,执行npm install,再执行gulp 如果没有compass环境,请将gulpfile.js中的compass的配置做相应调整,改成css监听