grunt-spritesmithでcss spriteをやってみる

CSS Spriteは普段、compassを使っているけれど、gruntでもできるとのことだったので試してみた。 gruntはほんま有能ですね。

プラグイン

grunt-spritesmith

Gruntfile.js

module.exports = function (grunt) {
  // Configure grunt
  grunt.initConfig({
    sprite:{
      all: {
        src: 'src/images/icons/*.png',   //スプライトにしたい画像達
        destImg: 'src/images/common/sprite.png',  //書きだした1枚画像の保存先
        destCSS: 'src/sass/_sprite.scss',   //生成されるcssと、その保存先
        imgPath: '/images/common/sprite.png',   //生成されるcssに記載されるcssパス
        engine: 'pngsmith',   //スプライト画像を作るのに必要なエンジン
        cssFormat: 'scss'   //生成されるcssのフォーマット
      }
    }
  });

  grunt.loadNpmTasks('grunt-spritesmith');

  grunt.registerTask('build', ['sprite']);

このプラグインを動かすには、pngsmith、phantomjs、canvasのどれかがないと動かない。 今回はpngsmithでやってみました。canvasが一番いいらしいです。試してません。

他にもいろいろオプションは設定できるけれど、個人的にはこれだけで十分でした。 こんな感じで、Gruntfileを書いて、Gruntを走らせると、見事画像とcssが作成されました。

_sprite.scss

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

sprite用のcssができたので、あとは@includeで使いたい場所にcssを書けばOKです。 i{ @include sprite($ico_arrow01); position: absolute; top: 12px; left: 10px; } みたいな感じで。 すごいね！

まとめ

個人的にcompass使う理由はCSS Sprite使うためだけに入れてたけれど、これでcompassの出番は無くなるような気がします。

ちょうど仕事で使いながら試しているので、もしかしたらどこかで「これ使いにくいわ〜」みたいな部分が出てくるかもしれないですけど、今のところはこれで問題はないですね。