Skip to content

weixin/gulp-tmtsprite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gulp-tmtsprite NPM version devDependency Status

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/[email protected]");
	background-position: -36px -66px;
	background-size: 32px;
}
}

Tips: Retina 3x is ready based on image name, like [email protected] with @3x string inside.


Image In -> ./slice/*.png

image-in

Image Out -> ./sprite/style-index.png

image-out

Tips: 3x sprite is an option when needed.

Know Issues

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

Team & License