GruntでWebFont作成を自動化



$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.


$npm install grunt-webfont --save-dev


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']);
};


関連記事

Grunt.jsを触ってみた

gulpでWebFont作成を自動化

Document Outliner

アウトライン生成ライブラリ、document-outliner をリリースしました

a-blog cmsでSVGを画像プレイスホルダーとして使う

a-blog cmsでPost Include後のコンテンツにJSを実行する

prism.js【syntaxhig hlighter】設定メモ

最新記事

カテゴリー

ハッシュタグ