Maison > interface Web > tutoriel HTML > Git@OSC 推荐|移动端css切片图合成雪碧图工具_html/css_WEB-ITnose

Git@OSC 推荐|移动端css切片图合成雪碧图工具_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:29:18
original
1076 Les gens l'ont consulté

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;}
Copier après la connexion

合成后的代码

.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; }
Copier après la connexion

示例

下载zip后,执行npm install,再执行gulp 如果没有compass环境,请将gulpfile.js中的compass的配置做相应调整,改成css监听

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal