gulp-tmtsprite
Automatically generate sprites image and CSS.
(with retina @2x, @3x supported)
NPM Home Page: https://www.npmjs.com/package/gulp-tmtsprite
Install
Install with NPM:
npm install gulp-tmtsprite --savenpm install gulp-if --save
Usage
gulpfile.js
var gulpif = ;var tmtsprite = ; gulp ;
Options Custom your slice image path
var gulpif = ;var tmtsprite = ; gulp ;
Result
CSS In -> style-index.less
Tips: try gulp-LazyImageCSS if you are too lazy to type image width
/ height
and more.
CSS Out -> style-index.css
//{}
Tips: Retina 3x is ready based on image name, like icon-xxx@3x.png
with @3x
string inside.
Image In -> ./slice/*.png
Image Out -> ./sprite/style-index.png
Tips: 3x sprite is an option when needed.
Know Issues
- 2x slice images' size should be even number, like
24x26@2x.png
not23x27@2x.png
Release History
- 0.0.21 Fix replacing of slice refference in different quote style
- 0.0.14 Retina @3x supported
- 0.0.12 @2x image background-postion fixed
- 0.0.10 Duplicate slice using supported
- 0.0.1 First Release