Laravel5 Elixirでスプライト画像を作成する（Retina対応） #PHP

laravel5のElixirでスプライト画像を作る方法です。

Elixirの下準備はこちらから。
http://laravel.com/docs/5.1/elixir

gulp.spritesmith

Elixirはgulpで実行しているのでgulpでスプライト画像を作成出来るようにします。

gulp単体で実行させるのであれば上記のプラグインだけで出来ますが、今回はElixirで行うのでそのまま使いません。

laravel-elixir-spritesmith

Elixirで上記のプラグインを動かすのに便利なものを作ってくれている方がいるのでこちらを拝借。

gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-spritesmith');

elixir(function(mix) {

  mix.spritesmith();

});

README.mdをみれば簡単に出来るはずです。簡単ですね。

Retina対応

今時のwebサイトでは当たり前になってきたRetinaディスプレイ対応の方法です。
https://github.com/twolfson/gulp.spritesmith#retina-parameters

gulp.spritesmithの方はRetinaディスプレイに対応していますが、Elixirで使用するlaravel-elixir-spritesmithの方が対応していないので、修正してプルリクを送りました。

Retina出力版 gulpfile.js

gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-spritesmith');

elixir(function(mix) {
  mix.spritesmith(null, {
    cssName: 'sprite.css',
    retinaSrcFilter: 'resources/assets/img/sprites/*-2x.png',
    retinaImgName: 'sprite-2x.png',
    retinaImgPath: '../img/sprite-2x.png',
    cssVarMap: function(item) { item.name = 'sprite__' + item.name; },
    imgOutput: 'public/img',
    cssOutput: 'public/css',
  });
});

追加した項目は以下の4項目です。

retinaSrcFilter
retinaImgName
retinaImgPath
cssVarMap

retinaSrcFilter

retinaSrcFilterはRetina用に使う画像をファイル名でフィルタリングします。
同じフォルダ内に通常の大きさが存在しても大丈夫です。

retinaImgName

Retina対応版のスプライト画像のファイル名を指定します。

retinaImgPath

Retina対応版のスプライト画像の出力先を指定します。

cssVarMap

これ自体にはRetina対応とは直説関連はしていませんが今回追加しています。
cssVarMapは出力されるCSSのクラス名を変更できます。

例に書いている通り出力すると

// ファイル名 hoge.png, hoge-2x.png

.icon-sprite__hoge {
  background-image: url(../img/sprite.png);
  background-position: -28px -182px;
  width: 30px;
  height: 24px;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-sprite__hoge {
    background-image: url(../img/sprite-2x.png);
    background-size: 300px 295px;
  }
 }

こんな感じのcssが出力できます。

実際に使用するときはsassで出力して、それをさらにElixirでほかのsassと一緒にコンパイルしてあげるとまとめられて便利だと思います。