用gulp.spritesmith构建雪碧图

[edwinna]

相对于传统的构建雪碧图的方式，spritesmith支持css模版,支持retina图片的缩放，简直是神器

主要API

• spritesmith(params) params如下
  • imgName: 雪碧图保存的图片名
  • cssName: css保存的名字
  • imgPath: 图片所在路径
  • padding: 图片拼接的间距
  • cssOpts:传递给模版的参数
  • cssFormat: css格式化
  • cssTemplate:渲染css的模版

相关配置文件config.js

module.exports = {
    spriteSource: 'images/sprite/*.*',
    spriteMithConfig:{
        imgName: 'sprite.png',
        cssName: 'sprite.scss',
        cssFormat: 'scss',
        padding:10,
        cssVarMap: function(sprite){
           sprite.name = 'icon-'+ sprite.name
        }
    },
    spriteOutputPath:'./src/sprite/',
    spriteCssOutputPath: './src/sprite/scss',
    spriteImgOutputPath: './src/sprite/img'
};

编写gulp task

var gulp = require('gulp');
var configs = require('./tasks/config');
var spritesmith = require('gulp.spritesmith');
var imagemin = require('gulp-imagemin');
var merge = require('merge-stream');
gulp.task('sprite:build', function(){
    var spriteData = gulp.src(configs.spriteSource)
      .pipe(spritesmith(
          configs.spriteMithConfig
      ));
      var imgStream = spriteData.img.pipe(gulp.dest(configs.spriteCssOutputPath));
      var cssStream = spriteData.css.pipe(gulp.dest(configs.spriteCssOutputPath));
      return merge(imgStream, cssStream);
})

gulp.task('sprite:images', function(){
    return gulp.src(configs.spriteOutputPath + '/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(imagemin({
        interlaced: true
    }))
    .pipe(gulp.dest(configs.spriteOutputPath));
})
gulp.task('default',['sprite:build','sprite:images']);

生成的sprite图片：

生成的sass如下：

$icon-icon-candy-cane-name: 'icon-icon-candy-cane';
$icon-icon-candy-cane-x: 138px;
$icon-icon-candy-cane-y: 0px;
$icon-icon-candy-cane-offset-x: -138px;
$icon-icon-candy-cane-offset-y: 0px;
$icon-icon-candy-cane-width: 48px;
$icon-icon-candy-cane-height: 48px;
$icon-icon-candy-cane-total-width: 186px;
$icon-icon-candy-cane-total-height: 186px;
$icon-icon-candy-cane-image: 'sprite.png';
$icon-icon-candy-cane: (138px, 0px, -138px, 0px, 48px, 48px, 186px, 186px, 'sprite.png', 'icon-icon-candy-cane', );
$icon-icon-cookie-name: 'icon-icon-cookie';
$icon-icon-cookie-x: 0px;
$icon-icon-cookie-y: 0px;
$icon-icon-cookie-offset-x: 0px;
$icon-icon-cookie-offset-y: 0px;
$icon-icon-cookie-width: 128px;
$icon-icon-cookie-height: 128px;
$icon-icon-cookie-total-width: 186px;
$icon-icon-cookie-total-height: 186px;
$icon-icon-cookie-image: 'sprite.png';
$icon-icon-cookie: (0px, 0px, 0px, 0px, 128px, 128px, 186px, 186px, 'sprite.png', 'icon-icon-cookie', );
……
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}
*/
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}

使用图标@include sprite($icon)

.sprite i{
  @include sprite($icon-icon-candy-cane);
}