pug.config.jsの設定について

pugファイルの設定ファイルであるpug.config.jsについて解説します。
以前の解説（webpackの設定について）で簡単に触れていますが、改めて詳しく解説していきます。
このpug.config.jsファイルは、自分が独自に作ったファイルですので、検索結果でヒットするpug.config.jsファイルについては別物になります。

pug.config.jsファイルには、大きく2つの役割があります。
1つは、pugファイルからhtmlファイルにコンパイルする際に、ページ情報（title、meta情報など）を渡す役割があります。
もうひとつの役割は、先方に確認出しする際のページ一覧ページ（pagelist.html）を生成する役割があります。
以前の解説（Web制作の開発環境とファイル構成について）でサンプルデータとしてアップしたsample.zipをダウンロードしていただき、次のコマンドを実行します。

npm run build

ファイルがコンパイルされ、publicフォルダにpagelist.htmlが出力されます。

npm run w

上のコマンドを実行し、ブラウザでpagelist.htmlにアクセスすると「画面一覧」が表示されるはずです。
ここに表示されているページ情報（ページ名、ファイル名、確認用URL、本番URL、ステータス）が、pug.config.jsファイルで管理されています。
pagelist.htmlのコンパイル対象となるpugファイルは、次の場所にあります。

/src/pagelist.pug

このファイルで書かれているpugコードの解説は割愛しますが、仕組みだけ触れます。

pagelist.pug

include ./_config
- var page = pagelist['pagelist'];

2行目までが上のようなコードになっています。
1行目は、_config.pugファイルをincludeするというコードですが、こちらについては別の記事で触れます。
2行目を見てみます。

- var page = pagelist['pagelist'];

変数pageにpagelist['pagelist']の情報を代入しています。
pagelistには、pug.config.jsファイルで定義している情報が代入されています。
次の部分がその該当となるコードです。

pug.config.js

 ・・・ 省略
module.exports = {
	"data": [
		・・・ 省略
	]
}

"data"をpagelistに代入する仕組みは、webpack.config.jsファイルで実行されています。
該当となる箇所は、次の部分になります。

webpack.config.js

・・・ 省略
const pugLoader = {
	use: [
		'html-loader',
		{
			loader: 'pug-html-loader',
			options: {
				pretty: true,
				data: {
　					pagelist: getPageListData()
				}
			}
		}
	]
};
・・・ 省略

getPageListData関数の解説は割愛しますが、この関数によってpug.config.jsファイルの情報がpagelistに代入されます。
ここまでの流れを整理します。

1. npm run build または npm run w でファイルをコンパイル
2. webpackが実行される
3. pug.config.jsファイルを読み込む
4. getPageListData関数が実行され、pug.config.jsファイルの情報がpagelistに代入される
5. pugファイルの変数pageに、pagelistに代入されているpug.config.jsファイルの該当ページの情報が代入される

上のような流れで、最終的に変数pageに情報が代入されます。
それでは、pug.config.jsファイルの情報を具体的にみていきます。

pug.config.jsファイル

まずは各情報を定義している定数部分について、

pug.config.js

const url = '/';
const local_url = '/';
const site_name = 'サイト名';
const og_locale = 'jp_JP';
const og_type = 'website';
const twitter_card = 'summary_large_image';
const twitter_site = '@';
const title = {
	'home': 'TOPページのタイトル',
	'page': '下層ページのタイトル'
};
const description = {
	'home': 'TOPページの説明文',
	'page': '下層ページの説明文'
};
const ogimg = url+'img/ogp.png';
const favicon = '/img/favicon.ico';
・・・ 省略

定数に関しては、定数名をみていただくと予想できると思いますが、主にtitle要素やmeta要素に必要な情報をまとめています。
これらは必要に応じてカスタマイズしてください。
定数urlには、公開されるurlを指定してください。
定数local_urlには、作業環境のルートを指定してください。

続いて、各ページごと情報を設定するdata部分をみていきます。

pug.config.js

・・・ 省略
module.exports = {
	"data": [
		{
			// ページ情報
		},
		{
			// ページ情報
		},
		{
			// ページ情報
		}
	]
}

上のような仕組みになっています。
例えば、実装に必要なページ数が3ページであれば、3ページ分の情報の設定が必要になり、100ページの実装が必要であれば、100ページ分の情報が必要になります。
「100ページ分の情報の設定なんて大変だ」という場合は、pug.config.jsファイルをカスタマイズするか、この仕組みをあきらめるかになると思います。
個人的には、経験上、100ページ分のpugファイルを用意して情報も設定するという状況になったことがなく、この仕組みでやれています。
おそらくその規模であれば、何かしらのCMSを導入する・・・という仕様になりそうです。
話を戻し、1ページごとの情報設定をみていきます。

pug.config.js

・・・ 省略
module.exports = {
	"data": [
		{
			"name": 'home',
			"url": url,
			"local_url": local_url,
			"title": title['home'],
			"page_title": 'トップページ',
			"level": 1,
			"description": description['home'],
			"keywords": '',
			"favicon": favicon,
			"og": {
				"title": title['home'],
				"description": description['home'],
				"image": ogimg,
				"type": og_type,
				"locale": og_locale,
				"siteName": site_name,
				"url": url
			},
			"twitter": {
				"title": title['home'],
				"description": description['home'],
				"image": ogimg,
				"card": twitter_card,
				"site": twitter_site,
				"url": url,
				"text": ''
			},
			"dev_state": 'テストアップ'
		}
	]
}

name : pugファイルで情報を取得する際の識別名となります。
上の例では、name="home"となっていますので、

- var page = pagelist['home'];

とすることで、そのページの情報が取得できます。

url : 画面一覧（pagelist.html）で使用する本番用URL
local_url : 画面一覧（pagelist.html）で使用する確認用URL
title : 出力されるhtmlファイルのtitle要素のテキスト
page_title : 画面一覧（pagelist.html）で使用するページ名
level : 階層レベル、現状使用していないが、画面一覧（pagelist.html）で下層別に表示を分けたい場合などに応用できる。
description : 出力されるhtmlファイルのmeta要素のdescriptionのテキスト
keywords : 出力されるhtmlファイルのmeta要素のkeywordsのテキスト
favicon : 出力されるhtmlファイルのfavicon画像参照先
og : meta要素のOG要素各種
twitter : meta要素のtwitter要素各種
dev_state : 画面一覧（pagelist.html）で使用するステータスのテキスト

上のようになっています。
この仕組みにより、pug.config.jsファイルでページの情報を管理することで、pugファイルからhtmlファイルにコンパイルする際に、title要素、meta要素などの情報を自動的に出力できるだけでなく、画面一覧（pagelist.html）を自動生成できるようになりました。
これは受託制作ならではかもしれませんが、先方に確認出しする際など、1ページごとURLを貼り付けてメールするのではなく、この画面一覧のURLを先方に連絡し、ステータスをみてもらうと進捗状況や担当範囲などが明確になります。
ここでは画面一覧のテンプレートファイルであるpagelist.pugについては触れませんが、このファイルをカスタマイズして、自分なりの画面一覧を作成すると良いと思います。
それでは最後に、実際に制作するページ（pugファイル）を追加して、htmlファイルとして出力する手順をまとめます。

pugファイルからhtmlファイルにコンパイルするまでの流れ

1. srcフォルダにpugファイルを追加する
例）/src/about/index.pug

2. pug.config.jsファイルに情報を追加する

pug.config.js

const title = {
	'home': 'TOPページのタイトル',
	'page': '下層ページのタイトル',
	'about': 'aboutページのタイトル'
};
module.exports = {
	"data": [
		{
			"name": 'home',
			// 省略
		},
		{
			"name": 'about',
			"url": url + 'about/index.html',
			"local_url": local_url + 'about/index.html',
			"title": title['about'],
			// 省略
		}
	]
}

3. pugファイルに情報を取得するコードを追加

/src/about/index.pug

- var page = pagelist['about'];

4. npm run w コマンドで、ファイルをコンパイル
/public/about/index.html
上のディレクトリにhtmlファイルが出力される

以上がコンパイルされるまでの流れになります。
ここまでがpug.config.jsの設定についての解説になります。
次回はPugのファイルの設計について解説したいと思います。