postcss-athena-spritesmith
针对Athena订制的CSS雪碧图工具，源码改自postcss-sprite
- 增加了只对
?__sprite后缀的样式做雪碧图处理 - 修复了
Athena的层级依赖关系
Install
npm install postcss-athena-spritesmith -DHow To Use
gulpfile.js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sprites = require('postcss-sprites');
var opts = {
stylesheetPath: modulePath + '/dist/_static/css/',
spritePath: modulePath + '/dist/_static/images/sprite.png',
retina: true,
verbose: true
}
gulp.src( modulePath + '/dist/_static/css' )
.pipe(postcss(sprites(opts)))
.dest( modulePath + '/dist/_static/css' )source.css
直接在需要合并雪碧图的CSS的url图片带
?__sprite后缀即可
/* 请确保需要合并雪碧图的后缀带有`?__sprite` */
body {
background: url('images/ball.png?__sprite');
}
h1 {
background-image: url('images/help.png?__sprite');
}
ball.pngandhelp.png
output.min.css
body,h1{background-image:url(../images/sprite.png)}
body{background-position:-104px 0;background-repeat:no-repeat;}
h1{background-position:0 0;background-repeat:no-repeat;}sprite.png