GruntでWebFont作成を自動化
June 15 Sun 2014
WebFont作成をGrunt.jsで自動化
WebFontを作成するサービスなどには、いろいろあり便利ですが、ちょっとした修正を入れる度にWebFont化するのは面倒くさいです。そこで、grunt-webfontという便利なプラグインがあったので自動化してみました。
ここでは、macにインストールしていきます。
下準備
- homebrew
- node
- grunt
ここらへんをインストールしておいて下さい。
インストール
grunt-webfontのreadmeに沿ってインストールしていきます。 まずはhomebrewでfontforgeとttfautohintをインストールするのですが、 readmeにnodeエンジンを使用するならfontfogeは必須でないとあるので、 ここではttfautohintのみをインストールします。
$brew install ttfautohint cairo: Unsatisfied dependency: XQurtz Homebrew does not package XQuartz. Installers may be found at: https://xquartz.macosforge.org Error: An unsatisfied requirement failed this build.
ただしここでエラーが発生。 エラーメッセージをみると、XQuartz入れろと言われている。 https://xquartz.macosforge.org から落としてきてインストールして再実行するとttfautohintがインストール出来ると思います。
次に本体となるgrunt-webfontパッケージをインストールします。（自分のプロジェクトで実行）
$npm install grunt-webfont --save-dev
これでインストールは完了です。
タスク設定
次にGruntfile.jsにタスクを書いて実行してみましょう。 以下、今回設定した内容。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // package.jsonの読み込み
// Web Font
webfont: {
icons: {
src: 'acms-fonts/*.svg', // svgファイル
dest: 'themes/system/fonts', // 書き出し先
destCss: 'themes/system/less', // スタイルの書き出し先
options: {
font: 'acms-fonts', // ベース名 (ファイル名など)
engine: 'node', // エンジン
hashes: true, // ファイル名にランダム文字列を追加
stylesheet: 'less', // スタイルシートの形式
htmlDemo: true, // htmlを生成するか
templateOptions: {
baseClass: 'acms-icon', // ベースクラス
classPrefix: 'acms-icon-' // クラス名プレフィックス
},
// クラス名のリネーム
rename: function(name) {
return name.replace(new RegExp('^.*CS5_'), '');
}
}
}
},
// 監視
watch: {
files: ['acms-fonts/*.svg'],
tasks: ['webfont']
}
});
// プラグインのロード
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-webfont');
// デフォルトタスクの設定
grunt.registerTask('default', ['watch']);
};オプション
基本的にはsrcとdestを設定すれば動きますが便利なオプションがあるので 今回設定したオプションをいくつかメモを残しておきます。
engine
フォント生成のエンジンを設定できます。fontforge or node 今回はfontforgeをインストールしなかったのでnodeを選択（デフォルト:fontforge ）
hashes
この設定がONだとファイル名にランダムな文字列をつけて生成してくれるので、 キャッシュがされないように出来ます。（デフォルト:TRUE ）
stylesheet
スタイルシートのタイプを選択。css, sass, scss, lessなどが選択できるみたいです。（デフォルト:css）
htmlDemo
生成したフォントの一覧をHTMLで出力してくれます。確認に便利。（デフォルト:TRUE ）
rename
基本的にはファイル名からフォントのクラスを生成するのですが、 このオプションを使う事により、クラス名を変更できます。今回は余分な文字列を削除するのに使用。
という事でgrunt-webfontのメモでした。