代码拉取完成,页面将自动刷新
#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图片
2.使用gm工具进行图片缩放
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监听
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型