Skip to content
Gulp CSS 雪碧图合并
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.editorconfig
.gitignore
.npmignore
README.md
index.js
package-lock.json
package.json

README.md

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

You can’t perform that action at this time.