blog
これからはじめる Gulp シリーズこれからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
この記事は書かれてから1年以上経過しており、内容が古い場合があります。
はじめに
この記事はGulp.js（全俺） Advent Calendar 2014です。
前回のこれからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化でSVGアイコンからアイコンフォントを自動生成する方法を試しました。今回は前回の記事をベースにgulp-consolidateを使ったアイコン一覧を確認できるHTMLを作ってみます。
この記事はSymbols for Sketchを参考にしています。
gulp-consolidateについて
gulp-consolidateはLo-Dashやswig等のテンプレートエンジンをGulpから使えるようにするプラグインです。対応しているテンプレートエンジンはこちらに記載されています。
デザインファイル
デザインファイルは前回の記事のアイコンデータをそのまま利用します。
テンプレートファイル
今回、時間短縮のためにSymbols for Sketchのソースにあるfont-awesome styleのテンプレートをそのまま使おうと思います。ローカルにダウンロードしてgulpプロジェクトの中に配置します。
モジュール・プラグインのインストール
必要なモジュール・プラグインをインストールします。
Lo-Dash
今回利用するテンプレートエンジンLo-Dashをインストールします。Lo-Dashはnode.jsのモジュールです。
$ sudo npm install lodash --save-dev
Password:
lodash@2.4.1 node_modules/lodash
gulp-rename
gulp-renameはテンプレートから生成するHTMLの名前を変更するために利用します。
$ sudo npm install gulp-rename --save-dev
Password:
gulp-rename@1.2.0 node_modules/gulp-rename
gulp-consolidate
$ sudo npm install gulp-consolidate --save-dev
gulp-consolidate@0.1.2 node_modules/gulp-consolidate
├── map-stream@0.0.4
└── consolidate@0.10.0
iconfontタスクにgulp-consolidateを組み込む
前回のiconfontタスクをベースに.on('codepoints', function(codepoints, options) {...}の中にgulp-consolidateプラグインを使ったHTMLとCSSを作るStreamを用意します。
var engine = 'lodash';
var templatePath = 'templates/';
var templateName = 'fontawesome-style';
var consolidateOptions = {
glyphs: codepoints,
fontName: fontName,
fontPath: '../assets/fonts/' + fontName + '/',
className: 's'
};
//css
gulp.src(templatePath + templateName + '.css')
.pipe(consolidate(engine, consolidateOptions))
.pipe(rename({ basename:fontName }))
.pipe(gulp.dest('assets/css/'));
//html
gulp.src(templatePath + templateName + '.html')
.pipe(consolidate(engine, consolidateOptions))
.pipe(rename({ basename:'sample' }))
.pipe(gulp.dest('assets/'));
全体はこのようになります。
var gulp = require('gulp');
var rename = require("gulp-rename");
var sketch = require('gulp-sketch');
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');
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',
compact: true,
formats: 'svg'
}
var fontOptions = {
fontName : fontName
}
gulp.src( srcGlob )
.pipe(sketch( sketchOptions ))
.pipe(iconfont( fontOptions ))
.on('codepoints', function(codepoints, options) {
var engine = 'lodash';
var templatePath = 'templates/';
var templateName = 'fontawesome-style';
var consolidateOptions = {
glyphs: codepoints,
fontName: fontName,
fontPath: '../assets/fonts/' + fontName + '/',
className: 's'
};
//css
gulp.src(templatePath + templateName + '.css')
.pipe(consolidate(engine, consolidateOptions))
.pipe(rename({ basename:fontName }))
.pipe(gulp.dest('assets/css/'));
//html
gulp.src(templatePath + templateName + '.html')
.pipe(consolidate(engine, consolidateOptions))
.pipe(rename({ basename:'sample' }))
.pipe(gulp.dest('assets/'));
})
.pipe(gulp.dest( dstGlob ));
});
タスクの実行
実行結果はこれだけですが、assetsディレクトリの中にLo-Dashで処理されたCSSとHTMLが作られているはずです。
$ gulp iconfont
[20:33:30] Using gulpfile ~/Projects/Labs/iconfont.gulp/gulpfile.js
[20:33:30] Starting 'iconfont'...
[20:33:30] Finished 'iconfont' after 11 ms
[20:33:30] gulp-svgicons2svgfont: Font created
assetsディレクトリの構造はこのようになっています。
assets
├── _design
│ └── icons.sketch
├── css
│ └── arrow-font.css
├── fonts
│ └── arrow-font
│ ├── arrow-font.eot
│ ├── arrow-font.svg
│ ├── arrow-font.ttf
│ └── arrow-font.woff
└── sample.html
assetsディレクトリの中にあるsample.htmlがシンボル一覧のHTMLです。これをブラウザで開くと以下のようにアイコン一覧が表示されます。
テンプレートをカスタマイズすることで好みの一覧表を作ることができます。
アイコンを使うには
テンプレートで作られたCSSは以下のようになっています。このCSSをHTMLに読み込みます。
@font-face {
font-family: "arrow-font";
src: url('../assets/fonts/arrow-font/arrow-font.eot');
src: url('../assets/fonts/arrow-font/arrow-font.eot?#iefix') format('eot'),
url('../assets/fonts/arrow-font/arrow-font.woff') format('woff'),
url('../assets/fonts/arrow-font/arrow-font.ttf') format('truetype'),
url('../assets/fonts/arrow-font/arrow-font.svg#arrow-font') format('svg');
font-weight: normal;
font-style: normal;
}
.s:before {
display: inline-block;
font-family: "arrow-font";
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.s-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.s-2x { font-size: 2em; }
.s-3x { font-size: 3em; }
.s-4x { font-size: 4em; }
.s-5x { font-size: 5em; }
.s-fw {
width: 1.2857142857142858em;
text-align: center;
}
.s-arrow-bottom:before { content: "\E001" }
.s-arrow-left:before { content: "\E002" }
.s-arrow-right:before { content: "\E003" }
.s-arrow-top:before { content: "\E004" }
HTMLで利用するには下記のようにクラスを指定します。
<span class="s s-arrow-bottom"></span>
Lo-Dashを使ったテンプレートについて
テンプレートのHTML/CSSを見てみるとgulp.jsのタスク内で定義したconsolidateOptions変数の中身を<%= xxxxx %>で参照できるようです。ちょっとしたHTMLやCSSを作る際に便利ですね。今回はCSSでしたが、少しテンプレートを調整すればSCSSで使えそうです。Lo-Dashを使ったHTMLテンプレートも難しくはなさそうですね。Lo-dashのドキュメントはこちらです。
<html>
<head>
<title><%= fontName %></title>
<link href="css/<%= fontName %>.css" rel="stylesheet">
<style>
body { font-family: Gill Sans; text-align: center; background: #f7f7f7 }
body > h1 { color: #666; margin: 1em 0 }
.glyph { padding: 0 }
.glyph > li { display: inline-block; margin: .3em .2em; width: 5em; height: 6.5em; background: #fff; border-radius: .5em; position: relative }
.glyph > li .s { display: block; margin-top: .1em; line-height: 0 }
.glyph-name { font-size: .8em; color: #666; display: block }
.glyph-codepoint { color: #999; font-family: monospace }
</style>
</head>
...
このプラグインのおかげで自前のアイコンフォントも手軽に作ることができ、配布するのも現実的になります。今回はここまでです。明日は定番ですがgulp-spritesmithを使ったSprite画像作成について試してみたいと思います。
シリーズ
- これからはじめるGulp（0）：アドベントカレンダースケジュール
- これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
- これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
- これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
- これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
- これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
- これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
- これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
- これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
- これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
- これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
- これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
- これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
- これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
- これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
- これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
- これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
- これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
- これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
- これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
- これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
- これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
- これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
- これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
- これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
- これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
- これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す