Web雑記帳 atsu666


GruntでWebFont作成を自動化

June 15 Sun 2014

WebFont作成をGrunt.jsで自動化

WebFontを作成するサービスなどには、いろいろあり便利ですが、ちょっとした修正を入れる度にWebFont化するのは面倒くさいです。そこで、grunt-webfontという便利なプラグインがあったので自動化してみました。

ここでは、macにインストールしていきます。

下準備

  • homebrew
  • node
  • grunt

ここらへんをインストールしておいて下さい。

インストール

grunt-webfontのreadmeに沿ってインストールしていきます。 まずはhomebrewでfontforgettfautohintをインストールするのですが、 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のメモでした。


tag : grunt js フォント 自動化