插件地址:sprites
gulp.task('sprites', function() {
return sprity.src({
src: './src/images/icon/**/*.{png,jpg}',
style: './_icon.scss',
margin: 20,
orientation: 'left-right',
processor: 'css',
})
.pipe(gulpif('*.png', gulp.dest('./src/images/'), gulp.dest('./src/sass/')))
});
配置了margin:20 生成的background-position位置会不准,设置成margin:0能正常。
PHPz2017-04-17 13:59:14
{{#each layouts}}
{{#each sprites}}
{{#if dpi}}
@media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi) {
{{/if}}
.icon {
background-image: url('{{escimage url}}');
{{#if dpi}}
background-size: {{width}} {{height}};
{{/if}}
}
{{#if dpi}}
}
{{/if}}
{{/each}}
{{#each layout.items}}
.{{../classname}}-{{meta.name}} {
background-position: (-{{x}}px - 20) (-{{y}}px - 20);
width: ({{width}}px - 40);
height: ({{height}}px - 40);
}
{{/each}}
{{/each}}
加了個這個正常了,好像需要配置.hbs模板