読者です 読者をやめる 読者になる 読者になる

本厚木のエンジニアブログではある

日々の開発で出たエラーや日常などいろいろ書いていくブログです。

gulp spritesmithの使い方spriteのretina対応について

今回gulpのspritesmith(スプライトスミス)を使って画像を1枚にしてwebサイトの読み込みを早くする作戦をしました。
その際のメモとしてgulp spritesmithの導入方法とspriteのretina対応の方法を書きました。
compass以外の方法でやったことなかったので間違ってたら教えてください。

sprite(スプライト)とは

❝スプライトとは、コンピュータ上で動く図形を表現する際に、動かす図形と固定された背景とを別に作成し、ハードウェア上で合成することによって表示を高速化する手法のことである。
主にコンピュータゲームなどで用いられている。
スプライト描画法では、それぞれ別に用意された図形をフレームバッファ内で重ね合わせ、ひとつの画面として表示させる。
重ね合わせの位置はピクセル単位で指定でき、複数重なった場合に表示の優先順を指定することもできる。
また、重ね合わせの際に指定する必要のあるデータは表示位置だけでよいので、処理や表示を高速にできる。❞

※引用元 スプライトとは 「スプライト描画」 (sprite): - IT用語辞典バイナリ

簡単に言うとアイコンとかをまとめて1枚の画像にしてリクエストとか減らして読み込みとか早くするための奴だろうと思ってる。。。

gulp spritesmithの使い方

gulpfile.jsに下記を追加しましょう。

//用意したやつ
var root = 'www/wordpress/wp-content/themes/';
var theme = 'origin';

var path = {
    sass:'_dev/sass/',
    css: root + theme + '/css/',
    js: root + theme + '/js/',
    imgs: root + theme + '/imgs/'
}

//cssスプライト
gulp.task('sprite', function() {
  var spriteData = gulp.src(path.imgs+'common/icons/*.png')
    .pipe(spritesmith({
      imgName: 'sprite.png',
      imgPath: 'images/sprite.png',
      cssName: 'sprite.css',
      padding: 10,
      retinaSrcFilter: path.imgs+'common/icons/*-2x.png',
      retinaImgName: 'sprite-2x.png',
      retinaImgPath: 'images/sprite-2x.png'
    }));
    spriteData.img.pipe(gulp.dest('./imgs'));
    spriteData.css.pipe(gulp.dest('./sass'));
});

ターミナルで
$gulp sprite
でできていると思います。

以上!

分解してざっくり説明できれば…

そもそもspriteのretinaとは

macとかのretinaディスプレイ対応用ですねたぶん
対応しないのであれば放置っち

imgNameとは

imgNameとはsprite(スプライト)が成功した時にどこに作成するかを指定できます。
下記の場合imagesフォルダを作成しその中にspriteしたsprite.pngを作成してくれます。
imgName: 'sprite.png',

imgPathとは

imgPathとはsprite(スプライト)画像を作ってくれたあとに
background-image: url(images/sprite.png);を吐き出すのでurlのpathの部分になります。
下記の場合上記の用になります。
imgPath: 'images/sprite.png'

cssNameとは

cssNameとはsprite(スプライト)画像を作ってくれたあとにpositionを画像ごとに教えてくれる良いファイルなので愛せるいい感じの名前にしてあげます。
簡単に言うとcssを吐き出す際のファイル名の指定。
cssName: 'sprite.css'

paddingとは

今回のpaddingはsprite時に通常は複数の画像がひっついてしまうが下記を追加するとpaddingを10pxあけてくれます。
padding: 10

retinaSrcFilterとは

retinaSrcFilterとはどの画像がretina用か指定してあげます。
通常の画像を複製して解像度(サイズ)を2倍にし、ファイル名に-2xを追加してあげましょう。
そうすることによってretina用の画像と理解してくれます。
下記の場合
retinaSrcFilter: path.imgs+'common/icons/*-2x.png'

retinaImgNameとは

retinaImgNameとはretina用のスプライト画像のファイル名を指定します。
retinaImgName: 'sprite-2x.png'

retinaImgPathとは

retinaImgPathとはsprite(スプライト)画像を作ってくれたあとに
background-image: url(images/sprite-2x.png);を吐き出すのでurlのpathの部分になります。
下記の場合上記の用になります。
retinaImgPath: 'images/sprite-2x.png'

gulp.dest

gulp.destとは簡単に言うと結果をどこに吐き出すかですね!

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