gulp-tmtsprite

0.0.23 • Public • Published

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/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-in

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

image-out

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

Team & License

Package Sidebar

Install

npm i gulp-tmtsprite

Weekly Downloads

2

Version

0.0.23

License

MIT

Unpacked Size

17.9 kB

Total Files

4

Last publish

Collaborators

  • littledu
  • willerce