概要

久しぶりに書きましたが、最近仕事が忙しくて、個人的なプロジェクトをする時間がありません(言い訳...)
いずれにしても、個人的なプロジェクトをするのは思い出せないし、魅力的なものがないのでやめたので、自然と文章を書かなくなった.
このときフォントワークが発生しました.それからフォントを追加して、各フォントに@font-faceを追加して、使い方が面倒なので、コンストラクタが一度にこれを作ればいいと思います.
もちろん、いろんなオープンソースがあり、作りやすいものもありますが、やってみたいと思って始めました.

デザイン

まず簡単にノードにするつもりです.
フォントファイルをnodeで再帰的に読み取り、各フォントファイルに名前に基づいて@font-faceを作成し、その中にfont-family、srcを追加して考える.

@font-face {
 font-family: '${FontName}';
 src: url('${FontUrl-ttf}'), url('${FontUrl-otf}'), url('${FontUrl-woff}');
}

だいたい上と同じ感じ?添付のフォント設定とローカルurl設定は次回検討することにし、基本的なフレームワークは以下の通りです.

インプリメンテーション

基本概念

実現方法は意外に簡単だ.以前nodeによってファイルシステムにアクセスしたことがあるため、検索によって容易に行われ、fsはファイルがdirであるかfileであるかを区別する機能を提供するため、再帰的に実現しやすい.
node js file system
ファイルであれば、フォントファイルかどうかによってもう一度区別し、フォント名とフォントごとのurlでmapを作成します.大体次のように感じます(?)

const FileFormat = ['.otf', '.ttf', '.woff', '.woff2'];

const fontObject = {
  RIDIBatang: [ './fonts/RIDIBatang/RIDIBatang.otf' ],
  'SpoqaHanSansNeo-Bold': [
    './fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf',
    './fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff',
    './fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2'
  ],
  'SpoqaHanSansNeo-Light': [
    './fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.ttf',
    './fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff',
    './fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2'
  ],
}

その後、fontObject keyに基づいてフォント名を定義し、font-familyでurlをurlの値に指定して、次の内容を作成します.

@font-face {
 font-family: 'RIDIBatang';
 src: url('./fonts/RIDIBatang/RIDIBatang.otf');
}

@font-face {
 font-family: 'SpoqaHanSansNeo';
 src: url('./fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf'),
      url('./fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff'),
      url('./fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2')
}

@font-face {
 font-family: 'SpoqaHanSansNeo';
 src: url('./fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.ttf'),
      url('./fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff'),
      url('./fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2')
}

次に、以下のファイルを特定のoutput cssファイルに書き込むとよい.思ったほど難しくないので、あまり技術がありません.

CLI制御スライダによる

基本概念によって論理が作成され,CLIによってこの論理を処理すべきであると考えられる.(毎回node index.jsはできない…)
筆者が使用しているライブラリはtj/commanderです.
ノードCLIを簡単に作成できるライブラリです.
まず受信できるオプションはfont diroutput dir程度で、その後Bold, Medium, Regular, Light, Thin offset,font styleに関する追加情報を受信することができます.
tj/commanderを使用しても、これらのオプションは非常に簡単に実現できます.

program
  .option('-d, --dir <dir>', 'Parsing dir')
  .option('-o, --output <dir>', 'Output dir')
  .action(() => {
    const options = program.opts();
    main(options);
  });

// eslint-disable-next-line no-undef
program.parse(process.argv);

これにより、optionsに以下のオブジェクトが生成されます.

options = { dir: ${dirName}, output: ${output dirName} }
// 만약 정의하지 않으면 비어있게 된다.
{}

これに基づいて、パケット化が必要なディレクトリとoutput fileが生成するディレクトリの場所を指定することを許可し、何も入力しない場合は、./fonts dirを自分で検索することを許可し、outputもパケット化が必要なディレクトリ内部で生成する.
これで今以下のことができます.
node index.js
node index.js -d ./public/fonts
node index.js -d ./public/fonts -o ./dist
node index.js -o ./dist
最後に、毎回node index.jsは使えないので、特定の名前を付けて、筆者はそれをgen-font-faceと書きます.では、package.jsonのファイルを変更する必要があります.以下に示します.

{
  "name": "gen-font-face", // name 추가
  "version": "1.0.1",
  "description": "Generate font-face CSS file from font files",
  "bin": {
    "gen-font-face": "index.js" 
  }, // 이부분을 추가해야지 npm 설치 후 cli 에서 gen-font-face index.js 파일이 실행됨
}

次に、cliで実行されるファイルの上部に次の内容を追加する必要があります.#!/usr/bin/env nodeは、このファイルをnode interpriterで実行する必要があることを示しています.

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');
const program = require('commander');

const FileFormat = ['.otf', '.ttf', '.woff', '.woff2'];

今からテストしなければなりません.毎回npmにアップロードしてテストすることはできません.私のローカルインストール後にテストを行うだけです.npm install -gと入力すると、ローカルnpm globalリストにインストールされていることがわかります.

では、node index.jsを使わずにgen-font-faceを使うことができます.
gen-font-face
gen-font-face -d ./public/fonts
gen-font-face -d ./public/fonts -o ./dist
gen-font-face -o ./dist

n/a.結論

上のプレゼンテーションgifを見ると、fontsフォルダのフォントファイルに基づいてcssファイルが作成されていることがわかります.
簡単ですが、cliはtj/commanderで作成できます.
同様に、過去の仕事では
gen-simple-reactapp
そこで,create-react-appの代わりにWebpackを用いてReactプロジェクトを簡単に設定できるcliを作成し,簡単なプレゼンテーションテストを行う際に実際に役立つ.(複数部門...)
gen-font-faceをnpmにアップロードしgithub actionを使用して自動的に配布する方法について説明します.
確かに、仕事で困ったことがあって、簡単にスクリプトを使って作成すると時間が短くなりそうで、面倒ですが、ソースコードをオープンしようとしています.もっと他の人が参加してもっと良いプロジェクトになればいいのに簡単だけど後でRUST?このままでは、もっと高度なJavaScript Ecoシステムが作れたらいいな.
gen-font-face