此版本
修改了在window下生成资源时,执行命令路径与操作文件路径及生成项目路径不在同一硬盘分区的问题。其他没有改动。
Table
Install
npm install css-img-sprite-rain
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:
after sprite: new image: new css file:
-
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.
you can write css like this:
/*or*/
- you can use auto to set background-size
/* or *//* or */
important:we will do nothing about unsprite image.so you need to copy unsprite image into new folder.and you need to take care the folder structure because we will not change the unsprite image url in 'background-image'
How To Write JS
-
API:
- raw ( content , spriteObj )
- sprite ( spriteObj , callback )
- spriteSync ( spriteObj )
-
Arguments Guide
/** * arguments: * content: * spriteObj: * spriteObj.cssSrc: * [spriteObj.cssDesDir]: * you need do it yourself.we need it because we need to change * css background-image:url() * [spriteObj.imgDesDir]: * [spriteObj.layout]: * [spriteObj.hash]: * [spriteObj.errLog]: * callback: * return: * content: * **/
raw is a low level api.you need to read css content and write new css file.
Example
you can see the usage in test folder