CSS Sprite Generator
npm install gulp-tmtsprite> Automatically generate sprites image and CSS.
> (with retina @2x, @3x supported)
NPM Home Page: https://www.npmjs.com/package/gulp-tmtsprite
Install with NPM:
``javascript`
npm install gulp-tmtsprite --save
npm install gulp-if --save
gulpfile.js
`javascript
var gulpif = require('gulp-if');
var tmtsprite = require('gulp-tmtsprite');
gulp.src('./src/css/style-*.css')
.pipe(tmtsprite())
.pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));
`
Options
Custom your slice image path
`javascript
var gulpif = require('gulp-if');
var tmtsprite = require('gulp-tmtsprite');
gulp.src('./src/css/style-*.css')
.pipe(tmtsprite({slicePath: '../slice'}))
.pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));
`
CSS In -> style-index.less
`css`
.icon-test {
width: 32px;
height: 32px;
background-image: url(../slice/test.png);
}
_Tips: try gulp-LazyImageCSS if you are too lazy to type image / height and more._
CSS Out -> style-index.css
`css
.icon-test {
background-image: url(../sprite/style-index.png);
}
// Retina 2x supported
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min-resolution: 240dpi) {
.icon-test {
background-image:url("../sprite/style-index@2x.png");
background-position: -36px -66px;
background-size: 32px;
}
}
`
_Tips: Retina 3x is ready based on image name, like with @3x string inside._
----
Image In -> ./slice/*.png
Image Out -> ./sprite/style-index.png
_Tips: 3x sprite is an option when needed._
* 2x slice images' size should be even number, like 24x26@2x.png not 23x27@2x.png`
* 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