gulpを使ってCSSスプライトを作ってみる sassで書き出しバージョン

compassでCSSスプライトを作成することもできますが、gulpのgulp.spritesmithっていうプラグインを見つけたので試しに使ってみました。
結構すんなりできましたし、さらに用途に応じてカスタマイズもできそうです。

まずはおさらい

sassのインストールやgulpの基本的な使い方は過去記事:compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しようを参考にしてください。

gulpでもできるスプライト画像

compassを使うとスプライト画像を作ってくれますが、実はgulpでもできるんですよ。compassのコンパイルって結構重いからスプライト画像までやりだすとさらに重いんですよね。なのでgulpでもできるならそっちの方がいいですよねってことで実際にやってみましょう。

gulp.spritesmithのインストール

まずはCSSスプライトを作成してくれるプラグインgulp.spritesmitをインストールしましょう。

npm install gulp.spritesmith

※Macのかたは「sudo」をつけてくださいね。

sudo npm install gulp.spritesmith

今回はscssファイルで書き出してmixinでスプライトができるようにするので、sassのコンパイルもできないとだめですね。

gulp-sassのインストール

npm install gulp-sass

※Macのかたは「sudo」をつけてくださいね。

sudo npm install gulp-sass

これで準備はOKです。

gulpfile.jsの完成形はこれ!

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

gulp.task('sprite', function () {
  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: '_sprite.scss',
    imgPath: '../images/sprite/sprite.png',
    cssFormat: 'scss', 
    cssVarMap: function (sprite) {
      sprite.name = 'sprite-' + sprite.name;
    }
  }));
  
  spriteData.img
    .pipe(gulp.dest('images/sprite/'));

  spriteData.css
    .pipe(gulp.dest('sass/'));
});



gulp.task('sass', function(){
    gulp.src('sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('css/'));
});

ディレクトリ構成は下記のようになります。

ディレクトリ構成

スプライトにしたい画像を数枚images内に入れてくださいね。サイズとかはどんな大きさでも大丈夫ですが、ファイル形式は.pngで保存してください。

gulp sprite

でスプライト画像が「images/sprite」内にできたのと、scss内に「_sprite.css」が出来上がっているかと思います。

「_sprite.scss」を見てみるとmixinで作られているのがわかると思います。確認してくださいね。

$sprite-icon_001-name: 'sprite-icon_001';
$sprite-icon_001-x: 0px;
$sprite-icon_001-y: 90px;
$sprite-icon_001-offset-x: 0px;
$sprite-icon_001-offset-y: -90px;
$sprite-icon_001-width: 80px;
$sprite-icon_001-height: 60px;
$sprite-icon_001-total-width: 100px;
$sprite-icon_001-total-height: 150px;
$sprite-icon_001-image: '../images/sprite/sprite.png';
$sprite-icon_001: 0px 90px 0px -90px 80px 60px 100px 150px '../images/sprite/sprite.png' 'sprite-icon_001';
$sprite-icon_002-name: 'sprite-icon_002';
$sprite-icon_002-x: 0px;
$sprite-icon_002-y: 0px;
$sprite-icon_002-offset-x: 0px;
$sprite-icon_002-offset-y: 0px;
$sprite-icon_002-width: 100px;
$sprite-icon_002-height: 90px;
$sprite-icon_002-total-width: 100px;
$sprite-icon_002-total-height: 150px;
$sprite-icon_002-image: '../images/sprite/sprite.png';
$sprite-icon_002: 0px 0px 0px 0px 100px 90px 100px 150px '../images/sprite/sprite.png' 'sprite-icon_002';
$spritesheet-width: 100px;
$spritesheet-height: 150px;
$spritesheet-image: '../images/sprite/sprite.png';
$spritesheet-sprites: $sprite-icon_001 $sprite-icon_002;
$spritesheet: 100px 150px '../images/sprite/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);
}
*/
@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);
    }
  }
}

「_sprite.css」というようにimportする形にしたので別にscssファイルを作ってimportしないと先ほどのmixinが使えないですね。sassディレクトリにstyle.scssというファイルを作りましょう。

@import "sprite";
i {
	@include sprite($sprite-icon_001);
	display: block;
}

「@importで_sprite.scss」を呼び出します。さらにmixinを呼び出したいのですが、「sprite($○○○○○○)」の部分は
おそらくみなさんのは「$sprite-icon_001」ではないかもしれません。

これは、「_sprite.scss」内の「$○○○○○○○-name」と書かれている部分がスプライトにしたい画像の数だけ連番で作られているのではないかなと思います。今回の僕の場合ならば

$sprite-icon_001-name: 'sprite-icon_001';
$sprite-icon_002-name: 'sprite-icon_002';

上記の部分ですね。よくコードを確認して試してみてくださいね。
ここまでできたらあとはscssファイルのコンパイルをするだけですね。

gulp sass

とすればコンパイルされてcssディレクトリ内にstyle.cssが生成されていると思います。

まとめ

CSSスプライトにすることでレンダリングを減らすことができて表示を速くすることに貢献できたりします。必ずしもページ速度が上がるわけではないですが、フロント側でもそういった努力って必要だと思うんですよね。

ただ、スプライト画像を作るのって意外に面倒くさかったり、CSSを作るのも結構めんどくさいんですよね。対応箇所が多いと特に。今回のようにgulpを使ったりしてCSSスプライトを自動で作ってくれるのは本当に助かります。
では良きCSSスプライトライフを。

参考にさせていただいたサイト


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

Compass使うのやめた

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

同じカテゴリーの記事

ページの先頭へ