README
Postcss Auto Sprite
PostCSS Auto Sprite plugin that generates css and sprites which grouped by directory from your stylesheets
Installation
$ npm install postcss-auto-sprite --save-dev
Usage
Use gulp
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const sprite = require("postcss-auto-sprite");
gulp.task("css", () => {
return gulp
.src("*.css")
.pipe(
postcss([
sprite({
imgPath: __dirname + "/img/",
sliceDir: "slice",
spriteDir: "sprite",
spriteDisplay: "../img/sprite",
revision: "query", // 'filename' or 'query'
unit: "px", // 'px' or 'rem'
spritesmithOptions: {
padding: 10
},
revision: true
})
])
)
.pipe(gulp.dest("./dist/css"));
});
Before:
.icon1{
background-image: url('../img/slice/dir1/icon_1.png');
}
.icon2{
background-image: url('../img/slice/dir1/icon_2.png');
}
.icon3{
background-image: url('../img/slice/dir2/icon_3.png');
}
.icon4{
background-image: url('../img/slice/dir2/icon_4.png');
}
After:
.icon1{
width: 20px;
height: 20px;
background-image: url('../img/sprite/dir1.png');
background-position: 0px 0px;
background-size: 50px auto
}
.icon2{
width: 20px;
height: 20px;
background-image: url('../img/sprite/dir1.png');
background-position: -30px 0px;
background-size: 50px auto
}
.icon3{
width: 20px;
height: 20px;
background-image: url('../img/sprite/dir2.png');
background-position: 0px 0px;
background-size: 50px auto
}
.icon4{
width: 20px;
height: 20px;
background-image: url('../img/sprite/dir2.png');
background-position: -30px 0px;
background-size: 50px auto
}