GulpでアイコンフォントとCSSとHTMLを作成する方法
特定のフォルダにSVGファイルを放り込んで、gulp Iconfont
を実行するとアイコンフォントとCSSとアイコンフォント一覧のHTMLを作成するgulpタスクを作ってみました。割りと簡単です。
フォルダ構成
最終的にできるフォルダ構成は以下のとおりです。
app
配下がプロダクトになることを想定し、プロダクトに必要のない余計なものが入らないようにしています。
なので、アイコンフォント生成に必要なSVGはapp
の下におかず、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が生成されてしまうことapp
、doc
フォルダにも生成されるフォントと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)
- 作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章
- 出版社/メーカー: 技術評論社
- 発売日: 2014/07/02
- メディア: 大型本
- この商品を含むブログ (1件) を見る