gulp-tmtsprite: A JavaScript repository from 微信

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 --save
npm install gulp-if --save

Usage

gulpfile.js

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

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/')));

Result

CSS In -> style-index.less

.icon-test {
	width: 32px;
	height: 32px;
	background-image: url(../slice/test.png);
}

Tips: try gulp-LazyImageCSS if you are too lazy to type image width / height and more.

CSS Out -> style-index.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 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 not 23x27@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