雪碧图工具sprity
原文 http://segmentfault.com/a/1190000003915988
前身是css-sprite,前几天帮新同事搭建环境,意外发现sprity在window下可以安装成功了,同时也发现node版本已经4点几了,自己电脑的版本还停留在0.10,赶紧把自己的node升级到最新版本,win10下,sprity安装成功,可以使用。
在这里介绍下sprity顺便提下自己遇到的问题。
介绍
sprity,一个模块化的雪碧图生成工具,会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择。
安装使用
通过npm安装
npm install sprity --save
也可以全局安装使用
npm install sprity -g
结合gulp使用,也可以用grunt,这里说下gulp的用法:
var gulp = require('gulp'); var gulpif = require('gulp-if'); var sprity = require('sprity'); // 创建sprites任务 gulp.task('sprites', function () { return sprity.src({ src: './src/images/**/*.{png,jpg}', //需要进行合并的图片路径 style: './sprite.css', //生成的样式文件名和格式,可以生成scss // 还有很多其他参数,如指定模板、图片格式、前缀、名称和图片合并的方向等,具体可以查看sprity的github内容 processor: 'sass', // 生成的样式格式 }) .pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/css/'))) });
配置好options,把图片放进目录中,运行gulp sprites,就可以生成对应的雪碧图和样式文件了。
sprity支持三种图片引擎,sprity-lwip、sprity-canvas和sprity-gm。默认使用的是sprity-lwip,好像lwip需要重新编译node-gyp什么的,所以当时我还是win7系统的时候,经常会报错,无法编译成功。另两个没试过,不展开说,有兴趣的可以去试着使用下。
模板
sprity采用handlebar来处理模板,已经写好有模板案例可以参考, sprity-css
问题
使用途中,我遇到一个问题无法解决,一个gulp任务里面,我想同时分开生成多张雪碧图,不知道为什么生成的图和样式会合并在一起。
例如,我这样写:
gulp.task('sprites', function () { sprity.src({ src: '/img/icon/*.png', style: '_icon.scss', format: 'png', orientation: 'left-right', template: './sprity-css.hbs', processor: 'scss', prefix: 'icon', name: 'icon' }) .pipe(gulpif('*.png', gulp.dest('/img/'), gulp.dest('/css/'))); sprity.src({ src: topicType + '/img/bg/*.png', style: '_bg.scss', format: 'png', orientation: 'left-right', template: './sprity-css.hbs', processor: 'scss', prefix: 'bg', name: 'bg' }) .pipe(gulpif('*.png', gulp.dest('/img/'), gulp.dest('/css/'))); });
最后生成两张图片:icon.png和bg.png,两个样式文件:_bg.scss和_icon.scss,这样没错,可以icon的图片和样式里面包含有bg的图片和样式:
_icon.scss:
.bg { background-image: url('#{$icon-sprite-path}/bg.png'); } .bg-btn-tg { background-position: -526px -196px; width: 80px; height: 32px; } .icon { background-image: url('#{$icon-sprite-path}/icon.png'); } .icon-btn-tg { background-position: -510px -280px; width: 80px; height: 32px; }
_bg.scss:
.bg { background-image: url('#{$icon-sprite-path}/bg.png'); } .bg-btn-tg { background-position: -526px -196px; width: 80px; height: 32px; }
我不确定是gulp流的问题,还是模板的问题,因为模板循环的是一个数组来的。sprity-css.hbs:
{{#each layouts}} {{#each sprites}} {{#if dpi}} @media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi) { {{/if}} .{{cssesc ../classname}} { background-image: url('{{escimage url}}'); {{#if dpi}} background-size: {{baseWidth}}px {{baseHeight}}px; {{/if}} } {{#if dpi}} } {{/if}} {{/each}} {{#each layout.items}} .{{../classname}}-{{meta.name}} { background-position: -{{baseDim x}}px -{{baseDim y}}px; width: {{baseDim width}}px; height: {{baseDim height}}px; } {{/each}} {{/each}}