gulp.spritesmithでCSS spriteをやってみた。【gulp】

gulp.spritesmithは、Gruntで言うところのgrunt-spritesmithのgulp版のようなものです。

gulpが話題になりつつあった昨年末や年始あたりには無かったのですが、久しぶりにgulpのプラグインを検索したら見つけましたので早速試してみました。

gulp.spritesmithのインストール

gulp.spritesmithを使うにはインストールをしなければなりませんのでターミナルを起動して、下記のコマンドを入力して力強くEnterキーを押します。

npm install gulp.spritesmith

gulpfile.jsに記述

gulp.spritesmithをタスクを以下のようにgulpfile.jsに記述します。他のオプションはこちらをご参考ください。

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

gulp.task('sprite', function () {
  var spriteData = gulp.src('public_html/img/sprite/*.png') //スプライトにする愉快な画像達
  .pipe(spritesmith({
    imgName: 'sprite.png', //スプライトの画像
    cssName: '_sprite.scss', //生成されるscss
    imgPath: '/img/sprite.png', //生成されるscssに記載されるパス
    cssFormat: 'scss', //フォーマット
    cssVarMap: function (sprite) {
      sprite.name = 'sprite-' + sprite.name; //VarMap(生成されるScssにいろいろな変数の一覧を生成)
    }
  }));
  spriteData.img.pipe(gulp.dest('public_html/img/')); //imgNameで指定したスプライト画像の保存先
  spriteData.css.pipe(gulp.dest('public_html/sass/')); //cssNameで指定したcssの保存先
});


gulp.task('default', function() {
	// デフォルトタスク
    gulp.run('sprite'); 

});

下記のような感じでmixinが生成されます。


  @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);
  }

また、cssVarMapを指定すると下記のような感じで変数の一覧を生成してくれます。

  $sprite-ball1-x: 0px;
  $sprite-ball1-y: 0px;
  $sprite-ball1-offset-x: 0px;
  $sprite-ball1-offset-y: 0px;
  $sprite-ball1-width: 50px;
  $sprite-ball1-height: 50px;
  $sprite-ball1-total-width: 50px;
  $sprite-ball1-total-height: 150px;
  $sprite-ball1-image: '/img/sprite.png';
  $sprite-ball1: 0px 0px 0px 0px 50px 50px 50px 150px '/img/sprite.png';
  $sprite-ball2-x: 0px;
  $sprite-ball2-y: 50px;
  $sprite-ball2-offset-x: 0px;
  $sprite-ball2-offset-y: -50px;
  $sprite-ball2-width: 50px;
  $sprite-ball2-height: 50px;
  $sprite-ball2-total-width: 50px;
  $sprite-ball2-total-height: 150px;
  $sprite-ball2-image: '/img/sprite.png';
  $sprite-ball2: 0px 50px 0px -50px 50px 50px 50px 150px '/img/sprite.png';
  $sprite-squre1-x: 0px;
  $sprite-squre1-y: 100px;
  $sprite-squre1-offset-x: 0px;
  $sprite-squre1-offset-y: -100px;
  $sprite-squre1-width: 50px;
  $sprite-squre1-height: 50px;
  $sprite-squre1-total-width: 50px;
  $sprite-squre1-total-height: 150px;
  $sprite-squre1-image: '/img/sprite.png';
  $sprite-squre1: 0px 100px 0px -100px 50px 50px 50px 150px '/img/sprite.png';

そしてあとは使いたい箇所で生成されたmixinを記述すればOK

i {
	@include sprite($sprite-ball1);
	display: block;
}

下記のような感じでCSSが出来上がります。

i {
  background-image: url(/img/sprite.png);
  background-position: 0px 0px;
  width: 50px;
  height: 50px;
  display: block;
}

Retina対応のためmixinを変更

gulp.spritesmithで生成されるmixinはRetina向けではありませんので、Retina向けに幅、高さ、位置をそれぞれ2で割るように「/2」を追加し、background-sizeのmixinを作ってやります。

  @mixin sprite-width($sprite) {
    width: nth($sprite, 5) / 2; //「/ 2」を追加
  }

  @mixin sprite-height($sprite) {
    height: nth($sprite, 6) / 2;「/ 2」を追加
  }

  @mixin sprite-position($sprite) {
    $sprite-offset-x: nth($sprite, 3)/2;「/ 2」を追加
    $sprite-offset-y: nth($sprite, 4)/2;「/ 2」を追加
    background-position: $sprite-offset-x  $sprite-offset-y;
  }

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

  //background-sizeのmixinを新たに生成
  @mixin sprite-size($sprite) {
    background-size: nth($sprite, 7)/2 nth($sprite, 8)/2;
  }

  @mixin sprite($sprite) {
    @include sprite-image($sprite);
    @include sprite-position($sprite);
    @include sprite-width($sprite);
    @include sprite-height($sprite);
    @include sprite-size($sprite);  //新たに作ったmixinの呼び出し
  }

これでRetina向けに対応させることができます。

最後に

gulp-spritesmithというのもあるのですが、試したのはgulp.spritesmithのほうです。gulp-spritesmithのほうは試していません。ドキュメントはgulp.spritesmithのほうがしっかりしているので、gulp.spritesmithのほうをオススメします。