FoundationでCSSスプライトを使う

ここのところ、Google Cloud Platformにかかりきりですっかり時間を使ってしまいました。

構築自体は、ネットの情報で簡単に立ち上げは可能です。wordpressの開発環境を構築するのが目的なので、CodeZineの「超高速WordPress仮想マシン「KUSANAGI」が搭載するPHP処理系とその導入方法」の記事の通りに構築したのが一つ。KUSANAGIは既存のOSSを利用したシステムなので、一からKUSAGAGIと同等のシステムを構築しようという記事です。全部読むには登録の必要があるのであしからず。
そして、KUSANAGI Runs on Dockerを使ったものが一つ、あとは、Google Cloud Launcherに用意されているWordPressを利用したものを一つ、合計3つを作ってみました。何も記事は登録していないので正確にはわかりませんが、確かにすこぶる早い印象です。

特に迷うことはなくすんなり作成はできましたが、なんかコレジャナイ感が…隔靴掻痒状態です。特にSSH関連でつまづいているので、きちんとした参考書が出るまで休憩します。
60日は無料なのでもったいないですが、しょうがない。

そんなわけで、しばらく触っていなかったFoundationの機能追加に取り組みました。まあ、すぐ終わっちゃったんですけど、どなたかのお役に立てば幸いです。自分用のメモでもありますけど。

gulp.jsにgulp.spritesmithを追加する

Foundation ForumにCreating css image sprites in the workflow with Zurb Templateというスレッドが立ちました。正直、飾り系の画像はほとんど使用していないので、Evernoteにスクラップしたままにしてありました。
このスレッドのリプライにyeomanという方が、foundation newで構築する環境にgulp.spritesmithを追加する方法を投稿されました。yeomanさんてあのYeomanと関係があるのかは不明です（一応チーム名一覧の中には見当たりませんでした）。

上記、投稿通りに設定すれば特に迷うことはないと思います。
まず、package.jsonのdevDependenciesに以下を追加します。

"gulp-csso": "^1.1.0",
"vinyl-buffer": "^1.0.0",
"merge-stream": "^1.0.0",
"gulp.spritesmith": "^6.2.0",

次に、gulp.babel.jsに以下を追加します。

/*
* @summary For sprites config only, generating sprite css and image
 * @author danish
  */
import csso     from 'gulp-csso';
import buffer   from 'vinyl-buffer';
import merge    from 'merge-stream';
import spritesmith from 'gulp.spritesmith';

function sprite() {
  var spriteData = gulp.src('src/assets/img/sprite/*.png')
  .pipe(spritesmith({
    imgName: '../img/sprite.png',
    cssName: '_sprite.scss'
    }));
  var spriteImg = spriteData.img.pipe(gulp.dest('src/assets/img'));
  var spriteCss = spriteData.css.pipe(gulp.dest('src/assets/scss/modules/'));
  if (!PRODUCTION) return (spriteImg && spriteCss);
}

そして、次の1行を function watch(){…}グループに挿入します。

gulp.watch('src/assets/img/sprite/**/*', gulp.series(sprite, browser.reload));

最後に、(sudo) npm install (macの場合は、sudoをつけてください。)を実行します。

あとは、"src/assets/img/"ディレクトリに"sprite"ディレクトリを作って、作成したいpng画像を入れてください。
で、npm startすれば、"src/assets/img/"ディレクトリ直下に、"sprite.png"が、"src/assets/scss/modules/"ディレクトリに、"_sprite.scss"ファイルができているはずです。この"_sprite.scss"をいつもの手順で、"app.scss"で@importして使ってください。
"_sprite.scss"の詳細はたくさん見つかると思いますので、他のサイトに譲ります。

FoundationPressにもgulp.spritesmith

さて、yeomanさん、続く投稿で、FoundationPressへの追加方法も投稿されています。
以下、その方法です。package.jsonは上記と同じように記述しておきます。
FoundationPressは、"gulpfile.js"というファイル名です。

// watch sprite
var spritesmith = require('gulp.spritesmith'); // import spritesmith from 'gulp.spritesmith';でも可。各jsファイルの形式に合わせています。

gulp.task('sprite', function () {   
    var spriteData = gulp.src('assets/images/sprite/*.png')
        .pipe(spritesmith({
            imgName: '../images/sprite.png',
            cssName: '_sprite.scss'
        }));
    var spriteImg = spriteData.img.pipe(gulp.dest('assets/images'));
    var spriteCss = spriteData.css.pipe(gulp.dest('assets/scss/modules/'));
    if (!isProduction || isProduction) return (spriteImg && spriteCss);
});

// Clean sprite
gulp.task('clean:sprite', function() {
  return del([
      'assets/images/sprite.png',
    ]);
});

そして、上記と同じように次の1行を gulp.task(‘default’, [‘build’, ‘browser-sync’], function() {　グループに挿入します。
私は、 // Sass Watch　の前に挿入しました。

  // watch sprite
  gulp.watch(['assets/images/sprite/**/*.png'], ['clean:sprite', 'sprite'])
    .on('change', function(event) {
      logFileChange(event);
    });

で、(sudo) npm install (macの場合は、sudoをつけてください。)を実行します。
あとは、やはり"assets/images/sprite"に画像を入れればその都度、"assets/images/"直下に"sprite.png"ファイルができて、"assets/scss/modules"に、"_sprite.scss"ファイルが作成されています。

CSSスプライトを多用されている方は、ぜひお試しあれ。