Web雑記帳

gulpでWebFont作成を自動化

gulp-iconfontでweb-font作成を自動化

前の記事（WebFont作成をGrunt.jsで自動化）でGruntによるweb-font自動化をやったのですが、今日マークアップ勉強会がベースキャンプ名古屋で開催されていなたのでgulpでもやってみました。

参考

以下２つを参考に動かしてみました。[Tsutomu Kawamura]さんのコードを少しいじって動かした感じです。

インストール

以下が今回インストールしたパッケージになります。

  • gulp
  • gulp-consolidate テンプレートエンジンで使用
  • gulp-iconfont シンボルフォント作成の本体
  • gulp-rename
  • gulp-watch ファイルの監視に使用
  • lodash テンプレートエンジンに使用

gulpfile.js

var gulp = require('gulp'); 

var watch       = require('gulp-watch');
var rename      = require("gulp-rename");
var iconfont    = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');

var fontName = 'myfont'; // シンボルフォント名

//--------------------------
// add task - gulp-iconfont
gulp.task('Iconfont', function(){
  gulp.src(['src/icons/*.svg'])
    .pipe(iconfont({
      fontName: fontName // required
    }))
    .on('codepoints', function(codepoints) {
        var options = {
            glyphs: codepoints,
            fontName: fontName,
            fontPath: '../fonts/', // フォントパスをCSSからの相対パスで指定
            className: 'myfont' // CSSのフォントのクラス名を指定
        };
        // シンボルフォント用のcssを作成
        gulp.src('src/templates/myfont.css')
            .pipe(consolidate('lodash', options))
            .pipe(rename({ basename:fontName }))
            .pipe(gulp.dest('dest/css/')); // CSSの吐き出し先を指定

        // シンボルフォント一覧のサンプルHTMLを作成
        gulp.src('src/templates/myfont.html')
            .pipe(consolidate('lodash', options))
            .pipe(rename({ basename:'sample' }))
            .pipe(gulp.dest('dest/')); // サンプルHTMLの吐き出し先を指定
    })
    .pipe(gulp.dest('dest/fonts/'));
});

//-----------
// SVGファイルを監視
gulp.task('watch', function() {
    gulp.watch('src/icons/*.svg', ['Iconfont']);
});

//--------------
// default task
gulp.task('default', ['watch']);

CSSのテンプレートを作成

シンボルフォント用のCSSのテンプレートを用意します。

@font-face {
	font-family: "<%= fontName %>";
	src: url('<%= fontPath %><%= fontName %>.eot');
	src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
		url('<%= fontPath %><%= fontName %>.woff') format('woff'),
		url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
		url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
	font-weight: normal;
	font-style: normal;
}

.<%= className %> {
	display: inline-block;
	font-family: "<%= fontName %>";
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.<%= className %>-lg {
	font-size: 1.3333333333333333em;
	line-height: 0.75em;
	vertical-align: -15%;
}
.<%= className %>-2x { font-size: 2em; }
.<%= className %>-3x { font-size: 3em; }
.<%= className %>-4x { font-size: 4em; }
.<%= className %>-5x { font-size: 5em; }
.<%= className %>-fw {
	width: 1.2857142857142858em;
	text-align: center;
}

<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name.slice(12) %>:before { content: "\<%= glyph.codepoint.toString(16).toUpperCase() %>" }
<% }); %>

シンボルフォント一覧のhtmlテンプレートを用意

おまけでシンボルフォント一覧が見れるhtmlのテンプレートを設定

<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 span:first-child { display: block; margin-top: .1em; font-size: 4em; }
			.glyph-name { font-size: .8em; color: #999; display: block }
			.glyph-codepoint { color: #999; font-family: monospace }
		</style>
	</head>
	<body>
		<h1><%= fontName %></h1>
		<ul class="glyph"><% _.each(glyphs, function(glyph) { %>
			<li>
				<span class="<%= className %> <%= className %>-<%= glyph.name.slice(12) %>"></span>
				<span class="glyph-name"><%= glyph.name.slice(12) %></span>
				<span class="glyph-codepoint"><%= glyph.codepoint.toString(16).toUpperCase() %></span>
			</li><% }); %>
		</ul>
	</body>
</html>

自動的に出力したシンボルフォント一覧HTML

という感じで設定をするとSVGファイルを編集して保存したタイミングで自動的にフォントを作成し、CSSとサンプルHTMLを書き出してくれます。gruntしか出来ないと思っていたらgulpでも出来るようなったので、gulp派の人は是非試してみて下さい。

最後に

今回は少しだけ名古屋マークアップ勉強会に参加させて頂きましたが、 参加した人それぞれ目標を決め、最後に発表するという形で有意義な勉強会だなと思いました。 一人で勉強するより、モチベーションもあがりますし知識の共有も出来るので近いかたは是非参加してみてはいかがでしょうか。

次回の勉強回も決まっている見たいです。 名古屋マークアップ勉強会 10/11

ではでは。

関連記事

[""]

GruntでWebFont作成を自動化
[""]

Grunt.jsを触ってみた
["Document Outliner"]

アウトライン生成ライブラリ、document-outliner をリリースしました
[""]

a-blog cmsでSVGを画像プレイスホルダーとして使う
[""]

a-blog cmsでPost Include後のコンテンツにJSを実行する
[""]

prism.js【syntaxhig hlighter】設定メモ

最新記事

カテゴリー

ハッシュタグ