gulp-css-img-sprite
v1.0.2
Published
input css file and get new css file & sprite image
Downloads
4
Readme
Table
Install
npm install css-img-sprite
Gulp Version
- Gulp : gulp-css-img-sprite
How To Write CSS
shop: bag:
- add '?__sprite' or '?__spriter' at the end of url to do sprite:
.image1 {
margin: 10px;
width: 100px;
height: 30px;
background: url("test/image/shop.png?__spriter") 0 0;
border: 3px solid black;
}
.image2 {
margin: 10px;
width: 50px;
background: url("test/image/bag.png?__spriter") 0 0;
height: 50px;
border: 3px solid black;
}
after sprite:
you can scale the image by set background-size.we can put the same scale images into one output image.
you can not use repeat,repeat-x or repeat-y with scale!=1,for example: you scale the image 2 times and you also use repeat-x,as a result, although you add '?__spriter',you will not get sprite image.
.image {
width: 70px;
background: url("test/image/bag.png?__spriter") repeat-x 0 200px;
background-size: 100px auto;
height: 10px;
}
you can write css like this:
.image {
width: 70px;
background: url("test/image/bag.png?__spriter") repeat-x 0 200px;
background-size: 50px auto;
height: 10px;
}
/*or*/
.image2 {
width: 70px;
background: url("test/image/bag.png?__spriter") repeat-x 0 200px;
height: 10px;
}
- you can use auto to set background-size
.image1 {
background: url("test/image/bag.png?__sprite") 0 0;
background-size: auto 50px;
}
/* or */
.image1 {
background: url("test/image/bag.png?__sprite") 0 0;
background-size: 50px 50px;
}
/* or */
.image1 {
background: url("test/image/bag.png?__sprite") 0 0;
background-size: auto auto;
}
How To Write JS
- Arguments Guide
/**
* arguments:
* spriteObj:{object}
* spriteObj.cssSrc:{string} although you give content,we still need file name,so,give us cssSrc
* [spriteObj.cssDesDir]:{string} css output dir ,default:cssSrc.we do not write new css file for you,
* you need do it yourself.we need it because we need to change
* css background-image:url()
* [spriteObj.imgDesDir]:{string} image output dir,default:cssSrc
* [spriteObj.layout]:{string} "linear"(default)|"matrix".matrix will use bin-packing
* [spriteObj.hash]:{boolean} add hash flag on sprite image
**/
for example
var sprite = require('gulp-css-img-sprite');
var gulp = require("gulp");
var outDir = "build";
gulp.src("css/**/*.css")
.pipe(sprite({
cssDesDir: outDir,
imgDesDir: "build/image",
hash: true
}))
.pipe(gulp.dest(outDir));
Important:you must make sure cssDesDir is as same as gulp.dest
Example
you can see the usage in test folder