在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
#gulp-css-gmspriter 简单的移动端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图片 3.使用gulp+gulp-css-spritersmith插件 进行css代码片段的图片合成 4.输出目录publish/ #优势1.不需要更改原来的css文件代码 2.可以配置需要合成的图片源路径,比如:images/icons 3.自动添加media query 移动设备查询代码片段,适应不同的屏幕材质(比如retina) #缺点1.需要手动输入源切片图的css代码: .m-icon-fail{ background: url(#{$icon_1_path}/m-pay-err.png) no-repeat; width:100px; height:100px;}.m-icon-success{ background: url(#{$icon_1_path}/m-suc.png) no-repeat; width:28px; height:28px;} #合成后的代码 .m-icon-fail { background: no-repeat;background-position: 0 0; width: 100px; height: 100px; }.m-icon-success { background: no-repeat;background-position: 0 -183px; width: 28px; height: 28px; } #示例下载zip后,执行npm install,再执行gulp如果没有compass环境,请将gulpfile.js中的compass的配置做相应调整,改成css监听 |
请发表评论