deepblue-will’s diary

JS、CSS,Ruby、Railsなど仕事や趣味で試した技術系のことを書いていきます。

GulpでアイコンフォントとCSSとHTMLを作成する方法

特定のフォルダにSVGファイルを放り込んで、gulp Iconfontを実行するとアイコンフォントとCSSとアイコンフォント一覧のHTMLを作成するgulpタスクを作ってみました。割りと簡単です。

フォルダ構成

最終的にできるフォルダ構成は以下のとおりです。
app 配下がプロダクトになることを想定し、プロダクトに必要のない余計なものが入らないようにしています。 なので、アイコンフォント生成に必要なSVGappの下におかず、iconfontの配下に置いてます。またここにiconfont.coffeeというgulpタスクがかかれたファイルや、cssやhtmlの生成に必要なファイルを置いてます。

── Gulpfile.coffee
├── app
│   ├── css
│   │   └── font.css // アイコンフォントを使用するためのCSS
│   └── fonts // 生成されるフォントが配置されるフォルダ
├── doc
│   └── iconfont // アイコンフォント一覧がみれるHTMLが配置されるフォルダ
├── iconfont
│   ├── iconfont.coffee
│   ├── svg // アイコンフォントにするSVGファイルを配置するフォルダ
│   ├── template.css // アイコンフォントのCSSを生成するためのテンプレート
│   └── template.html // アイコンフォント一覧のhtmlを生成するためのテンプレート

必要なモジュール

以下のNodeモジュールが必要なので npm install --save-dev {モジュール名} でインストールします。

  • gulp-consolidate : gulpでTemplate engineを扱えるようになる
  • gulp-iconfont : SVGをアイコンフォントにしてれる
  • gulp-rename : gulpで生成されるファイルをリネームできる
  • lodash: gulp-consolidateで使用するtemplate engine
  • require-dir: 別のフォルダにあるgulpfileを読み込むために必要
  • coffee-script : GulpfileをCoffeeScriptで書くために必要。JSで書くなら不要
  • gulp-coffee : 上記とおなじ

Gulpfile

まず直下のGulpfile.coffeeは別のフォルダにあるタスクを実行するだけなので、別のフォルダにあるファイルを読み込むというということをかいてあるだけです。
以下のとおりに書くとタスクごとにGulpfileを分割することができます。

dir = require 'require-dir'
dir './iconfont', { recurse: true }

そして肝心のアイコンフォントを生成するスクリプトは以下のとおりです。
gulp-iconfontのサンプルコードほぼそのままです。 ポイントとしては2点。

  • rename しないとテンプレートCSSと同じファイル名のCSSが生成されてしまうこと
  • appdoc フォルダにも生成されるフォントとCSSどちらも生成してます。これはdocに生成されるhtmlからappのCSSを参照させたくなかったためです。doc単体でもアイコンフォント一覧がみれるようにしてます。
gulp = require 'gulp'
iconfont = require 'gulp-iconfont'
consolidate = require 'gulp-consolidate'
rename = require "gulp-rename"
runTimestamp = Math.round Date.now() / 1000

gulp.task 'Iconfont', () ->
  return gulp.src ['iconfont/svg/*.svg']
    .pipe iconfont
      fontName: 'myfont'
      appendUnicode: true
      formats: ['ttf', 'eot', 'woff', 'svg']
      timestamp: runTimestamp
    .on 'glyphs', (glyphs, options) ->
      cssFileName = 'font'
      engine = 'lodash'
      consolidateOption =
        glyphs: glyphs
        fontName: 'myfont'
        fontPath: '../fonts/'
        className: 'icon'

      gulp.src 'iconfont/template.css'
        .pipe consolidate engine, consolidateOption
        .pipe rename basename: cssFileName
        .pipe gulp.dest 'app/css/'
        .pipe gulp.dest 'doc/iconfont/css'

      consolidateOption.cssFileName = cssFileName
      gulp.src 'iconfont/template.html'
        .pipe consolidate engine, consolidateOption
        .pipe rename basename: 'font'
        .pipe gulp.dest 'doc/iconfont'

    .pipe gulp.dest 'app/fonts/'
    .pipe gulp.dest 'doc/iconfont/fonts/'

テンプレートファイル

テンプレートファイルは以下の2つを使用してます。

ただそのままではエラーがでてしまいまので、glyph.codepoint.toString(16).toUpperCase()glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase()に書き換える必要がある点に注意してください。

最後に

これでgulp Iconfont でアイコンフォント、CSS、アイコン一覧のHTMLが生成されるはずです。 一応deepblue-will/gulp-iconfont-sampleにサンプル置いておくのでよかったらみてください。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)