これからはじめる Gulp シリーズこれからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的WebサイトパブリッシュでAmazon S3への静的サイトパブリッシュを試しました。今回はSketch 3のデザインデータからgulp-iconfontとgulp-sketchプラグインを使ってアイコンフォント作成を自動化してみたいと思います。

gulp-iconfontについて

gulp-iconfontはSVGアイコンを使ってSVG/TTF/EOT/WOFF形式のフォントを作ることができます。

gulp-sketchについて

gulp-sketchはこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出しの回で紹介した通り、Sketchをコマンドラインから呼び出して画像を書き出すSketchToolを使ったプラグインです。

アイコン用のデザインファイルを用意する

Sketchで512 * 512のアートボードを用意して各アートボードに背景指定なしのアイコンを作りました。シンボルはすべて結合ツール結合しておきます。フォントを含む場合は必ずアウトライン化します。

今回は4つの矢印をアイコンフォント化してみます。

プラグインのインストール

必要なプラグインをインストールします。

gulp-iconfont

sudo npm install --save-dev gulp-iconfont
gulp-iconfont@1.0.0 node_modules/gulp-iconfont
├── plexer@0.0.3 (readable-stream@1.0.33)
├── gulp-ttf2eot@1.0.0 (bufferstreams@0.0.2, ttf2eot@1.3.0, readable-stream@1.0.33)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, minimist@1.1.0, vinyl@0.4.6, chalk@0.5.1, through2@0.6.3, lodash.template@2.4.1, dateformat@1.0.11, multipipe@0.1.2, lodash@2.4.1)
├── gulp-svg2ttf@1.0.0 (bufferstreams@0.0.2, readable-stream@1.0.33, svg2ttf@1.2.0)
├── gulp-svgicons2svgfont@1.0.0 (readable-stream@1.0.33, svgicons2svgfont@1.0.0)
└── gulp-ttf2woff@1.0.0 (bufferstreams@0.0.2, readable-stream@1.0.33, ttf2woff@1.3.0)

gulp-sketch

vi gulpfile.js
$ sudo npm install gulp-sketch --save-dev
Password:
gulp-sketch@0.0.6 node_modules/gulp-sketch
├── clean-sketch@1.0.1
├── temporary@0.0.8 (package@1.0.1)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, minimist@1.1.0, vinyl@0.4.6, chalk@0.5.1, multipipe@0.1.2, lodash@2.4.1, dateformat@1.0.11, lodash.template@2.4.1)

iconfontタスクを作る

gulp-sketchとgulp-iconfontプラグインを使ってタスクを作ります。gulp-iconfontプラグインのオプションはこちらに詳しく記載されています。

var gulp     = require('gulp');
var sketch   = require('gulp-sketch');
var iconfont = require('gulp-iconfont');

var paths = {
  srcDir : 'assets/_design',
  dstDir : 'assets/fonts'
}

gulp.task('iconfont', function(){
  var fontName = 'arrow-font';
  var srcGlob  = paths.srcDir + '/icons.sketch';
  var dstGlob  = paths.dstDir + '/' + fontName;

  var sketchOptions = {
    export : 'artboards',
    formats: 'svg'
  }
  var fontOptions = {
    fontName         : fontName
  }

  gulp.src( srcGlob )
    .pipe(sketch( sketchOptions ))
    .pipe(iconfont( fontOptions ))
    .on('codepoints', function(codepoints, options) {
      // CSS templating, e.g.
      console.log(codepoints, options);
    })
    .pipe(gulp.dest( dstGlob ));
});

実行

実行するとSketchから書き出されたSVGはそのままgulp-iconfontプラグインでフォントとなります。

$ gulp iconfont
[17:19:25] Using gulpfile ~/Projects/Labs/iconfont.gulp/gulpfile.js
[17:19:25] Starting 'iconfont'...
[17:19:25] Finished 'iconfont' after 11 ms
[ { name: 'arrow-bottom', codepoint: 57345 },
  { name: 'arrow-left', codepoint: 57346 },
  { name: 'arrow-right', codepoint: 57347 },
  { name: 'arrow-top', codepoint: 57348 } ] { fontName: 'arrow-font',
  ignoreExt: false,
  log: [Function],
  error: [Function],
  fixedWidth: false,
  descent: 0,
  round: 10000000000000 }
[17:19:25] gulp-svgicons2svgfont: Font created

できあがったアイコンフォント

できあがったアイコンフォントは4つの形式で保存されます。

assets
├── _design
│   └── icons.sketch
└── fonts
      └── arrow-font
          ├── arrow-font.eot
          ├── arrow-font.svg
          ├── arrow-font.ttf
          └── arrow-font.woff

実際にHTMLで表示してみるとこのようになります。

アイコンを追加してgulpコマンドをたたくだけでアイコンフォントが作れるようになりました。便利すぎますね。明日は上記のサンプルのようにSymbols for Sketchを参考にしてアイコン一覧が載ったHTMLドキュメントを作ってみたいと思います。

参考サイト

• Symbols for Sketch

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す