gulp-fez-sprite

自动合并雪碧图并自动生成对应的样式.(支持高清屏 @2x, @3x 图)

安装

npm install gulp-fez-sprite --save-dev
npm install gulp-if --save-dev

使用

gulpfile.js

var gulpif = require('gulp-if');
var fezsprite = require('gulp-fez-sprite');

gulp.src('./src/css/*.less')
    .pipe(fezsprite())
    .pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));

Options 雪碧图路径

var gulpif = require('gulp-if');
var fezsprite = require('gulp-fez-sprite');

gulp.src('./src/css/*.less')
    .pipe(fezsprite({slicePath: '../slice'}))
    .pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));

示例

源码 -> index.less

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

输出 -> index.css

.icon-test {
  background-image: url(../sprite/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;
}
}

注意事项

• 两倍雪碧图的尺寸必须是偶数, 比如： [email protected] 不能是： [email protected]