mssgen は、HTML をそのまま書きながら静的サイトを組み立てられる、シンプルな npm 製 CLI ツールです。
npm install mssgenで使い始められるnpx mssgen/npx mssgen devですぐ試せるcommon/に共通パーツを置いて{{header.html}}のように読み込める{{{ name: キー;内容 }}}で名前付きブロックを定義し、{{{{ key }}}}で別ファイルから再利用できるsetting.jsonの値を{SITE_NAME}のようなプレースホルダーへ差し込めるpng/jpg/jpegをwebpに変換し、ローカル参照も自動で.webpに更新できる
プロジェクトに追加して、npx で実行します。
npm install mssgen
npx mssgen init
npx mssgen devビルドだけしたいときは次を実行します。
npx mssgen普段から CLI として使いたい場合はグローバルインストールもできます。
npm install -g mssgen
mssgen init
mssgen dev新規ディレクトリでも、既存の HTML プロジェクトでも使えます。
mkdir my-site
cd my-site
npm init -y
npm install mssgen
npx mssgen initmssgen init は、不足している次のファイルだけを作成します。
setting.jsoncommon/header.htmlcommon/footer.htmlindex.html
npx mssgen dev- デフォルトでは
http://127.0.0.1:3000で起動します - ファイル変更を監視し、再ビルド後にブラウザを自動リロードします
- ポートは環境変数
MSSGEN_PORTで変更できます
例:
MSSGEN_PORT=4000 npx mssgen devnpx mssgenビルド結果は dist/ に出力されます。
{
"variables": {
"SITE_NAME": "My Site",
"SITE_DESCRIPTION": "Generated by mssgen"
},
"build": {
"webpExclude": ["assets/no-convert.png"]
}
}<header>
<h1>{SITE_NAME}</h1>
<p>{SITE_DESCRIPTION}</p>
</header><!DOCTYPE html>
<html lang="ja">
<body>
{{header.html}}
<main>
<h2>{SITE_NAME} へようこそ</h2>
<p>ここに本文を書きます。</p>
</main>
{{footer.html}}
</body>
</html>common/ 配下の HTML を {{...}} で読み込めます。
{{header.html}}
{{nested/footer.html}}setting.json の variables 配下のキーを {...} で埋め込めます。
<title>{SITE_NAME}</title>{{{ name: キー;内容 }}} をどこかのテキストファイルに書くと、その場でも 内容 が展開され、さらにほかの HTML / CSS / JS / テキストファイルから {{{{ key }}}} で再利用できます。
<!-- landing.html -->
{{{ name: hero;<section class="hero">{SITE_NAME}</section>}}}
<!-- about.html -->
<main>
{{{{ hero }}}}
</main>- 既存の
{{part.html}}や{SETTING_KEY}と衝突しないよう、専用の 3 重 / 4 重ブレースだけを解釈します - ビルド前に名前付きブロックを 1 回収集してから展開するので、ファイルごとに再探索せず高速です
- 再帰参照や未定義キーは警告を出して安全にスキップします
png / jpg / jpeg はビルド時に webp へ変換されます。
さらに HTML / CSS / JS のローカル画像参照も、対応する場合は .webp に書き換えられます。
setting.json の build.webpExclude に配列でファイルパス（プロジェクトルート相対）を指定すると、その画像は変換対象外になります。
{
"build": {
"webpExclude": [
"assets/no-convert.png",
"images/hero.jpg"
]
}
}mssgen はカレントディレクトリを再帰的に走査し、対象ファイルを dist/ に同じ構造で出力します。
ビルド対象からは次が除外されます。
dist/node_modules/.git/common/setting.jsonpackage.jsonpackage-lock.json
mssgen init: 初期ファイルを不足分だけ生成mssgen: 本番用のdist/を生成mssgen dev: 監視つき開発サーバーを起動
npm install mssgen で導入した場合は、mssgen の代わりに npx mssgen を使ってください。
開発者向けの補足は DEV.md にあります。