spritesmithというnpmを使って、CSSスプライトを手軽に実現します。

spritesmithを呼び出す手段

公式のREADME.mdに書かれているように、spritesmithは以下の手段を通して呼び出せるnpmパッケージが既に存在します。自分にあったものを選べばよいでしょう。

呼び出す手段が違うだけで、本質的な機能はどれも同じです。今回は、gulpプラグインとコマンドラインインターフェースの例を紹介します。

基本の使い方

gulpプラグインを通して使う

パッケージ名はgulp.spritesmithですので、例えば以下のようにローカルインストールします。

npm install --save-dev gulp.spritesmith

gulpfile.jsには、以下の例のようにパラメータimgNameとcssNameを指定します。他にも色々なオプションがありますが、最低限これだけあればOKです。

gulpfile.js

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

gulp.task('sprite', () => {
  const originalImages = 'img/*.png'; // これらの画像を1個にまとめる。
  const spritesmithParam = {
    imgName: 'sprite.png', // 生成される画像
    cssName: 'sprite.css' // 生成されるCSS
  };

  return gulp.src(originalImages)
    .pipe(spritesmith(spritesmithParam))
    .pipe(gulp.dest('generated')); // このディレクトリの下にsprite.pngとsprite.cssが生成される。
});

CLIを通して使う

パッケージ名はspritesmith-cliですので、例えば以下のようにローカルインストールします。

npm install --save-dev spritesmith-cli

このCLIでは、デフォルトでは.spritesmith.jsというファイルにspritesmithへ渡すパラメータを書きます（コマンドラインオプションによって明示的にファイルを指定することもできます）。
このファイルでは、各種パラメータをセットしたオブジェクト（またはその配列）をexportするように定められています。例えば以下のように書きます。

.spritesmith.js

module.exports = {
  src: 'img/*.png', // これらの画像を1個にまとめる。
  destImage: 'generated/sprite.png', // 生成される画像
  destCSS: 'generated/sprite.css' // 生成されるCSS
};

パラメータ名がgulpプラグインの場合と異なりますが、名前が違うだけで本質的には変わりありません。

実行するには、spritesmithというコマンドを使います。
今回の例ではグローバルインストールではなくローカルインストールにしたので、以下のようにして実行します。

node_modules/.bin/spritesmith

あるいはpackage.jsonに以下のように書いて、

"scripts": {
  "css-sprite": "spritesmith"
}

このように実行してもよいでしょう。

npm run css-sprite

画像とCSSが生成されたら

sprite.pngという画像が、複数の画像を1個のファイルにまとめたものです。素材となる画像として、例えばimgディレクトリに以下の2つがあったとして・・・

github.png

twitter.png

生成されたsprite.pngは、このような画像になります。

そしてsprite.cssとして、このようなCSSが生成されます。

.icon-github {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 32px;
  height: 32px;
}

.icon-twitter {
  background-image: url(sprite.png);
  background-position: -32px 0px;
  width: 32px;
  height: 32px;
}

デフォルトでは、.icon-{素材画像のファイル名}というCSSクラスが割り当てられます。
あとは以下のように、これらのCSSクラスをHTMLに指定すればOKです。

<!DOCTYPE html>
<html>
<head lang="ja">
    <link rel="stylesheet" href="generated/sprite.css">
    <title>spritesmithサンプル</title>
</head>
<body>
  <p>ここにアイコンを表示するdiv要素↓</p>
  <div class="icon-github"></div>

  <p><span class="icon-twitter" style="display: inline-block;"></span>←行内にアイコンを表示するために、display: inline-block;を指定した。</p>
</body>
</html>

このHTMLをブラウザで表示した様子がこちら。

その他の使い方

基本の使い方は以上ですが、その他の使い方を少し紹介します。

ここで紹介する以外にもspritesmithには他にも色々なパラメータがあり、素材画像の並べ方や、生成されるCSSのテンプレートをいじったりもできます。
生成される結果をいじりたい状況に直面したら、生成結果をさらに変換する処理を自作する前に、公式ドキュメントを見て、使えそうなパラメータがないか探すとよいでしょう。

素のCSS以外の形式で生成する

生成するスタイルシートのファイル名には、.css以外の拡張子も指定できます。例えば以下のようにSCSS形式にしてみます（gulpプラグインにおける例を書いていますが、CLIでも同様です）。

const spritesmithParam = {
  imgName: 'sprite.png',
  cssName: 'sprite.scss' // .cssを.scssに変えただけ。
};

これを実行すると、色々な変数やmixinが定義されたSCSSファイルが生成されます。このSCSSファイルを自作のSCSSファイルから参照し、mixinを呼んだりして使います。

my-style.scss

@import 'generated/sprite';

// sprite.scssに定義されているspritesというmixinを使う。
// このmixinに引数として渡す$spritesheet-spritesという変数も、
// sprite.scssに定義されているもの。
@include sprites($spritesheet-sprites);

このSCSSをCSSに変換すると、素のCSSを生成した場合とほぼ同じCSSが得られます。この例では単純すぎてわざわざSCSS形式で生成した意味がないですが、中間の結果である変数やmixinを、自作のSCSSファイルにおける別の場所で再利用したり、といった使い方ができるでしょう。

スプライト画像のパスを指定する

デフォルトでは、生成されるCSSのbackground-imageプロパティのurlには、生成される画像の名前がそのまま入ります。

background-image: url(sprite.png);

imgPathというパラメータによって、urlの部分を明示的に指定できます。
画像とCSSとで配置するディレクトリを分けたい場合などに使えるでしょう。

const spritesmithParam = {
  imgName: 'sprite.png',
  cssName: 'sprite.css',
  imgPath: '../release/sprite.png' // url(../release/sprite.png)となる。
};

spritesmithによる初めてのCSSスプライト