これからはじめるGulp #23：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
前回のこれからはじめる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 </span></pre> <h3>gulp-rename</h3> <p>gulp-renameはテンプレートから生成するHTMLの名前を変更するために利用します。</p> $ 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（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作るの転載です。
