gulp-css-gmspriter: 移动端css切片图合成雪碧图工具

#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监听

AresYe / gulp-css-gmspriter

简介

发行版

贡献者

近期动态

AresYe / gulp-css-gmspriter .gitee-modal { width: 500px !important; }

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

AresYe / gulp-css-gmspriter