template-html を Fork してオレオレ HTML ジェネレータを作った
template-html という npm パッケージがある。テンプレートとなる HTML と、それにバインディングしたいソースを持つ HTML とを指定すると、テンプレート HTML 内に指定のソースをバインディングした HTML を生成してくれる。
- 参考 : template-html - npm
- 参考 : GitHub - grit96/template-html: Generate static HTML files from templates and content files.
使用例
コードとしてはこんな感じ。
<!-- template.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><!-- build:title --></title>
</head>
<body>
<div><!-- build:content --></div>
</body>
</html>
これがテンプレート側。一方、値を持つ方はこんな風に作る。
<!-- content.html -->
<!-- build:title -->ページタイトル<!-- /build:title -->
<!-- build:content -->
<h1>コンテンツ</h1>
<p>本文</p>
<!-- /build:content -->
これを以下のようなコマンドで実行する。
$ template-html content.html -t template.html -o dist
すると、dist/content.html というファイルが生成されており、以下のような HTML になっている。
<!-- dist/content.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<div>
<h1>コンテンツ</h1>
<p>本文</p>
</div>
</body>
</html>
このように、template.html のコメント部分と対応する content.html のコメントを判別し、そのコメントで囲まれた内容が取り込まれている。
これを Fork した
1つのテンプレート HTML ファイルを色んな HTML に適用することができるこの npm パッケージ、望んていだとおりのものなのだが、少し気に入らないところがあった。
- テンプレートの書き方が HTML コメントなのが嫌… (なんとなく)。
build:といった余計なタグを書いてあげないといけないっぽい (設定で無効にできるようだがそもそも要らないので…)。
ということで、
- テンプレート部分を
{{ hoge }}という二重ブレースで書けるようにする。 build:などのタグを求めず、オプションごと削除する。
ということをやってみようと思い、npm パッケージを Fork して公開してみた。
npmjs のページは以下。
ソースコードは GitHub にて公開中。
npm パッケージ公開までの道のり
やったことは以下のとおり。
- template-html の GitHub リポジトリを Fork する
- コードを修正して思いどおりのコードにする
package.jsonを修正して新たなパッケージ名で公開できるようにするnpm publish --access=publicする
手順 1. は本当に GitHub で Fork するだけ。
を Fork して
を作った。
次にコード修正。さいわい構成ファイルは実質1ファイルだったので、index.js を読解して、文字列を replace() している箇所を見つけていじった。
cli.js と bin/template-html は CLI 部分。実際の処理は index.js がやるワケだが、オプション引数を解釈したりとかしているのがココ。要らないオプションができたのでその記述を削除した。
ついでにテストも書いてみたが、tape というテストツールは手軽で良いね。
- 参考 : tape - npm
出来上がったら package.json の name プロパティを @neos21/template-html に変更。これで別名でパッケージを公開できる。
最後に npm publish --access=public で公開。スコープパッケージ名にしている場合は --access オプションが必要。
README.md に npm バージョンを表示するバッジを作ったが、以下のようなコードで実現できる。
[](https://www.npmjs.com/package/@neos21/template-html)
[](https://www.npmjs.com/package/【スコープ名】/【パッケージ名】)