今回は、Node.jsで、gulpではなくgulp-google-webfontsを使って、Google Web FontsのダウンロードとCSSの生成を行います。
Node.jsでソースのトランスパイルなどのタスクを記述する場合、少し前までは、gulpやGruntなどのタスクランナーを使うことが多かったと思います。しかし、最近ではgulpなどに頼らず、npm runを使ってタスクを定義する流れがあるようです。私自身も少し前までgulpを使っていましたが、webpackによるコードのビルドしか、主に行なっていなかったので、gulpを使わずに、webpackのコマンドをnpm runで直接実行するようになりました。
gulp-google-webfontsはgulpとはついているものの、コマンドも用意されており、gulpを使わなくても利用できるので、npm runにコマンドを記述して取得したいと思います。
準備
以下の3つのファイルを用意します。- package.json
- fonts.list
- index.html
package.json
まずは、以下の「package.json」を作成します。最低限の項目のみ記述しています。
1 2 3 4 5 6 7 8 9 10 |
{ "name": "gulp-google-webfonts-command-test", "version": "1.0.0", "scripts": { "google-webfonts": "node ./node_modules/.bin/google-webfonts < fonts.list --out-base-dir css --fonts-dir fonts --css-dir . --css-filename fonts.css" }, "dependencies": { "gulp-google-webfonts": "0.0.14" } } |
dependenciesの定義で、gulp-google-webfontsをインストールします。
scriptsの定義によって、「npm run google-webfonts」コマンドを使えるようになります。このコマンドを実行することで、フォントの取得、CSSの生成ができます。
「node ./node_modules/.bin/google-webfonts」としているのは、google-webfontsのシェバンで「/usr/bin/node」が直接指定されているので、NVMなどを使って他の場所にnodeコマンドをインストールしている場合でも、実行できるようにするためです。
--out-base-dirでベースのフォルダを、--fonts-dirでフォントの出力フォルダ、--css-dirでcssの出力フォルダ、--css-filenameでフォントの読み込みを定義したCSSファイルの出力先を指定できます。上記のコマンドのように指定して実行した場合は、以下のような出力になります。
1 2 3 4 5 6 7 |
css ├fonts │├Oswald-normal-400.woff │├Oswald-normal-700.woff │├Roboto-italic-500.woff │└Roboto-normal-500.woff └fonts.css |
fonts.list
次に、以下のファイルを用意して、google-webfontsコマンドで指定した「fonts.list」というファイル名にします。フォントは、Google Fontsから探すことができます。Google Fontsのサイトで、フォントを選択すると、画面下部分に、「1 Family Selected」のように記述されたバーが現れます。バーをクリックすると、「<link href="https://fonts.googleapis.com/css?family=Roboto:500,500i&subset=greek" rel="stylesheet">」のように、linkタグが表示されると思います。このときのURLの、「Roboto:500,500i&subset=greek」に当たる部分がリストに記述する内容です。
1 2 |
Oswald:400,700&subset=latin-ext Roboto:500,500i&subset=greek |
個々のフォントのライセンスについては、Google Fontsのサイトの各フォントのページに書いてありますので、各自ご確認ください。
index.html
次に、サンプル表示のための、HTMLファイルを準備します。ここでは、「index.html」として保存します。
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/fonts.css"> </head> <body> <h1 style="font-family: Oswald">Oswald</h1> <h1 style="font-family: Roboto">Roboto</h1> </body> </html> |
以下のようなファイル構成になります。
1 2 3 4 5 6 7 8 9 10 11 |
/path/to/directory ├css(npm run google-webfontsで自動生成されるディレクトリ) │├fonts ││├Oswald-normal-400.woff ││├Oswald-normal-700.woff ││├Roboto-italic-500.woff ││└Roboto-normal-500.woff │└fonts.css ├fonts.list ├index.html └package.json |
コマンドの実行
package.jsonのあるディレクトリに移動して、「npm i」を実行すればライブラリがインストールされます。次に、「npm run google-webfonts」を実行すると、cssディレクトリ以下にフォントとCSSファイルが生成されます。
表示の確認
index.htmlをブラウザで開いてください。以下のように、指定したフォントの表示が確認できます。
最後に
わざわざWebフォントとCSSを、ローカルに用意して使いたい機会は少ないかもしれませんが、インターネットに繋がらない環境で開発する場合など、あえてCDNを使いたくない場合には、有効かもしれません。キー・ポイントでは、なんでもコマンド一発でこなすエンジニアを募集しています。