update log

Table

1. Install
2. Gulp Version
3. How To Write CSS
4. How To Write JS
5. Example

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