grunt-webfontで書き出されるwebフォントの文字列を変更

Gruntで web フォントを管理するためのプラグイン「grunt-webfont」の書き出し形式をカスタマイズしてみました。

grunt-webfontの利用方法はMOLの「HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ — MOL」を参考にしてください。

ただし、このままでは「myfont-b5fd89266afbbfbfc281a0ce9a5bf50e.eot」や「myfont-b5fd89266afbbfbfc281a0ce9a5bf50e.ttf」といったランダムな文字列が追加されたweb フォントが出力されます。

このランダムな文字列はGruntのoptionsでhashes:falseを指定すると出力されなくなります。

webfont: {
  icons: {
    src: 'icons/*.svg',
    dest: '/fonts',
    options: {
      hashes:false
    }
  }
}

ただし、このまま利用した場合キャッシュの強いサーバーなどではweb フォントを更新してもユーザーのweb フォントのキャッシュが更新されません。

そこでCompassのconfig.rbに以下のスクリプトを追加してCSSに出力されるweb フォントへのパスに「myfont.eof?2014-02-26+00%3A41%3A01+%2B0900」と言った具合にファイルの更新日時を追加するように変更してみました。

require 'cgi'
  
on_stylesheet_saved do |filename|
  filePath = "../fonts/myfont."
  eot = File::stat(filePath+"eot")
  if File.exists?(filename)
    css = File.read filename
    time = CGI.escape(eot.mtime.to_s)
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{\.eot"}, '.eot?'+time+'"').gsub(%r{\.eot\?\#iefix"}, '.eot?#iefix&'+time+'"').gsub(%r{\.ttf"}, '.ttf?'+time+'"').gsub(%r{\.woff"}, '.woff?'+time+'"')
    end
  end
end

grunt-webfontを利用している場合はちょっと便利かもしれません。

関連エントリー

メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」
Sass/Compassでコンパイルするとカラーコードが色名になってしまう件
Compassで書き出すCSSファイルを軽量化する
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
Google ChromeでCSSがSassの何行目に記述されているか確認する方法

スポンサードリンク

«エラー・デバッグから学ぶJavaScript / jQuery入門[CSS Nite back2basic 2014] | メイン | 現場のプロが教えるWeb制作の最新常識 が増刷されました»