GulpでCSSスプライトを作成する

GulpでCSSスプライトを作成してみます。

サンプルコード

gulp.spritesmithをインストールします。

npm install gulp.spritesmith --save-dev

gulpfile.jsに以下のように記述します。
今回は実際にCSSスプライトを使う際にsassを使用していますが、コードは省略しています。

var gulp = require('gulp'),
    spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
  var spriteData = gulp.src('./img/sprite/*.png') // スプライトにする画像(png)
  .pipe(spritesmith({
    imgName: 'sprite.png', // 生成するスプライト画像の名前
    cssName: '_sprite.scss', // 生成するsassの名前
    imgPath: '../img/common/sprite.png', // sassに記載されるスプライト画像のパス
    cssFormat: 'scss', // 生成するCSSのフォーマット
    cssVarMap: function (sprite) {
      sprite.name = 'sprite-' + sprite.name; // sassで使用する変数名
    }
  }));
  spriteData.img.pipe(gulp.dest('./img/common/')); // 生成するスプライト画像の保存場所
  spriteData.css.pipe(gulp.dest('./scss/')); // 生成するsassの保存場所
});

画像のディレクトリは以下のようになっています。
img/sprite/以下にスプライト画像にする画像群を、img/common/にスプライト画像が生成されます。

• img
  • sprite
    • icon_arrow.png
    • icon_mail.png
  • common

コマンドプロンプトで以下を実行します。

gulp sprite

img/commonにsprite.pngとscssディレクトリに_sprite.scssが生成されました。
_sprite.scssの中身は以下のようになっています。

scss/_sprite.scss

/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
$sprite-icon-arrow-name: 'sprite-icon_arrow';
$sprite-icon-arrow-x: 0px;
$sprite-icon-arrow-y: 0px;
$sprite-icon-arrow-offset-x: 0px;
$sprite-icon-arrow-offset-y: 0px;
$sprite-icon-arrow-width: 20px;
$sprite-icon-arrow-height: 20px;
$sprite-icon-arrow-total-width: 40px;
$sprite-icon-arrow-total-height: 20px;
$sprite-icon-arrow-image: '../img/common/sprite.png';
$sprite-icon-arrow: (0px, 0px, 0px, 0px, 20px, 20px, 40px, 20px, '../img/common/sprite.png', 'sprite-icon_arrow', );
$sprite-icon-mail-name: 'sprite-icon_mail';
$sprite-icon-mail-x: 20px;
$sprite-icon-mail-y: 0px;
$sprite-icon-mail-offset-x: -20px;
$sprite-icon-mail-offset-y: 0px;
$sprite-icon-mail-width: 20px;
$sprite-icon-mail-height: 11px;
$sprite-icon-mail-total-width: 40px;
$sprite-icon-mail-total-height: 20px;
$sprite-icon-mail-image: '../img/common/sprite.png';
$sprite-icon-mail: (20px, 0px, -20px, 0px, 20px, 11px, 40px, 20px, '../img/common/sprite.png', 'sprite-icon_mail', );
$spritesheet-width: 40px;
$spritesheet-height: 20px;
$spritesheet-image: '../img/common/sprite.png';
$spritesheet-sprites: ($sprite-icon-arrow, $sprite-icon-mail, );
$spritesheet: (40px, 20px, '../img/common/sprite.png', $spritesheet-sprites, );

/*
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);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
@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);
    }
  }
}

実際にCSSスプライトを使ってみます。

HTML

<i class="icon icon_arrow"></i>

_sprite.scssと同じディレクトリにstyle.scssを作成します。

scss/style.scss

@import "sprite";
.icon {
  display: inline-block;
}
.icon_arrow {
  @include sprite($sprite-icon_arrow);
}

生成した_sprite.scssをインポートして、使用する場所で生成されたmixinを記述します。
sassをコンパイルすると、以下の内容のCSSが生成されました。

style.css

.icon {
  display: inline-block;
}

.icon_arrow {
  background-image: url(../img/common/sprite.png);
  background-position: 0px 0px;
  width: 20px;
  height: 20px;
}

【参考サイト】

• gulpを使ってCSSスプライトを作ってみる sassで書き出しバージョン | ichimaruni-design
• CSS Sprite を自動生成する – Gulp で作る Web フロントエンド開発環境 #8 – NET BIZ DIV. TECH BLOG
• gulp.spritesmithでCSS spriteをやってみた。【gulp】 – E-riverstyle Vanguard