gulpでアイコンフォントを自動生成する

はじめに

svg画像を使いやすくするために、アイコンフォントにすることは
多いと思うのですが、アイコンフォントをgulpで生成するやりかたをメモしておきます。

任意のディレクトリにsvgファイルを投げ込んだら全て自動でアイコンフォントが
生成されてhtml上で即使用できるようにしたいと思います。

nodeのインストールやgulpの基本的な使い方は省略します。

ライブラリのインストール

今回は下記の5つを使用します。

• gulp

• gulp-svgmin

• gulp-iconfont-css

• gulp-iconfont

• gulp-watch

    $ npm install gulp gulp-svgmin　gulp-iconfont-css　gulp-iconfont gulp-watch　--save-dev
  

タスクの設定

インストールに成功したらgulpのタスクを記述しているjsファイルで読み込みます。

gulpfile.js

var gulp = require('gulp')
, svgmin = require('gulp-svgmin')
, iconfontCss = require('gulp-iconfont-css')
, iconfont = require('gulp-iconfont')
, watch = require('gulp-watch')
;

タスクは今回こんな感じにしてみました。

gulpfile.js

gulp.task('start', function(){
  // ファイルが変更されたら再コンパイル
  gulp.watch('develop/svg/*.svg', ['iconfont']);
});

gulp.task('iconfont',['iconfont-hoge'], function () { 
  gulp.src('develop/fonts/*')
    .pipe(gulp.dest('release/common/fonts'));  // release配下にフォントファイルをコピー
});

gulp.task('iconfont-hoge', function (callback) {

  var svgminData = gulp.src('develop/svg/*.svg')
    .pipe(svgmin());  // svgファイルを圧縮

  svgminData.pipe(plumber())
    .pipe(iconfontCss({  // アイコンフォントのscssを生成する
        fontName: 'iconfont',
        path: 'develop/scss/iconsTemplate.scss',  // icons.scssのテンプレート
        targetPath: '../scss/setting/icons.scss',  // 生成するscssのパス
        fontPath: '../fonts/'  //scssからfontファイルへのパス。最終的にrelease配下に置かれた際に読み込めるパスにする
    }))
    .pipe(iconfont({  // アイコンフォントを生成する
        fontName: 'iconfont',
        formats: ['ttf', 'eot', 'woff', 'svg'],
        appendCodepoints:false
    }))
    .pipe(gulp.dest('develop/fonts')) //develop配下にscssとiconfontを生成
    .on('end', function(){  // iconfont-hogeが完了してからiconfontを実行
        callback(); 
    });
});

iconsTemplate.scssはこちらを参考にしています。
scssのcssへのコンパイルは、プロジェクトで使用している他のscssファイルと合わせて他の部分で行っていますが今回は省略。

    $ gulp start

でwatchが実行され、develop/svg/ディレクトリを監視します。

ファイル構成

ファイル構成はこんな感じ

develop --- svg    // svgファイルを格納するディレクトリ、watchで監視
         |- fonts  // アイコンフォントを生成するディレクトリ
         |- scss   // iconsTemplate.scssを格納、icons.scssを生成するディレクトリ

release --- index.html
         |- common
               |- css    // コンパイルしたcssを生成するディレクトリ
               |- fonts  // アイコンフォントファイルをコピーする

最終的にはwatchを使用して、develop/svg内のsvgファイルが変更されたらiconfontタスクが実行されるようにしています。

基本的にはsvgファイルをdevelop/svgに投げ込むだけで関連ファイルが全て更新されるようにしているので開発効率化の参考になれば。