Pugのコンパイルする方法

Pugをコンパイルする場合、インストールしたパッケージによって異なります。

目次
  1. Node.jsの場合
  2. コマンドラインの場合
  3. Gulpの場合

Node.jsの場合

Node.jsでコンパイルする場合は、まずpugモジュールを読み込みます。

  • ※ npmのパッケージ"pug"がインストールされている必要があります。

ファイルからコンパイルする場合はpug.compileFileメソッド、コード文字列からコンパイルする場合はpug.compileメソッドを使用します。
どちらのメソッドもコンパイル後のHTML文字列を返します。
コンパイル後のHTML文字列をファイルとして保存したい場合は、fnモジュールなどを使用して保存します。

const fs  = require('fs');
const pug = require('pug');

// Pugファイルをコンパイル
const html = pug.renderFile('foo/bar.pug');

// HTMLファイルとして保存
fs.writeFileSync('dest/bar.html', html);

このコードをファイルに保存し、次のコマンドを実行することでコンパイルが実行されます。
（"pug-compile.js"で保存した場合）

node pug-compile.js

pug.compileFileメソッドなどを含む利用可能なメソッドは次の通りです。

pug.compile

ソースコードからコンパイルを行います。
pug.compileメソッド自身は関数を返しますが、その関数を実行することでコンパイルされたHTML文字列を返します。

構文

pug.compile(source, options)
引数名 型 説明
第一引数
必須		 source string コンパイルするPugのソースコード。
第二引数 options object コンパイルする際のオプション。
詳しくは共通オプションを参照。

サンプルコード

const pug = require('pug');

const fn = pug.compile(`
doctype html
html(lang="ja")
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		title="Page Title"
	body
		h1="Page Title"
		p
			| Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur mollitia repellendus quibusdam amet veritatis,
			br
			| excepturi pariatur natus quia alias exercitationem a consequuntur labore, libero quasi iste quaerat quis velit.
`, {
	pretty : true
});

console.log(fn());

pug.compileFile

Pugファイルからコンパイルを行います。
pug.compileFileメソッド自身は関数を返しますが、その関数を実行することでコンパイルされたHTML文字列を返します。

構文

pug.compileFile(path, options)
引数名 型 説明
第一引数
必須		 path string コンパイルするPugファイルのパス。
第二引数 options object コンパイルする際のオプション。
詳しくは共通オプションを参照。

サンプルコード

const pug = require('pug');

const fn = pug.compileFile('foo/bar.pug', {
	pretty : true
});

console.log(fn());

pug.compileClient

ソースコードからコンパイルを行います。
ブラウザで実行可能にするためのJavaScriptコードを返します。

構文

pug.compileClient(source, options)
引数名 型 説明
第一引数
必須		 source string コンパイルするPugのソースコード。
第二引数 options object コンパイルする際のオプション。
詳しくは共通オプションを参照。

サンプルコード

const pug = require('pug');

const code = pug.compileClient(`
doctype html
html(lang="ja")
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		title="Page Title"
	body
		h1="Page Title"
		p
			| Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur mollitia repellendus quibusdam amet veritatis,
			br
			| excepturi pariatur natus quia alias exercitationem a consequuntur labore, libero quasi iste quaerat quis velit.
`);

console.log(code);

pug.compileFileClient

Pugファイルからコンパイルを行います。
ブラウザで実行可能にするためのJavaScriptコードを返します。

構文

pug.compileFileClient(path, options)
引数名 型 説明
第一引数
必須		 path string コンパイルするPugファイルのパス。
第二引数 options object コンパイルする際のオプション。
詳しくは共通オプションを参照。

サンプルコード

const pug = require('pug');

const code = pug.compileFileClient('foo/bar.pug', {
	pretty : true
});

console.log(code);

pug.render

ソースコードからコンパイルを行います。
コンパイル済みのHTML文字列を返します。

構文

pug.render(source, options, callback)
引数名 型 説明
第一引数
必須		 source string コンパイルするPugのソースコード。
第二引数 options object コンパイルする際のオプション。
詳しくは共通オプションを参照。
第三引数 callback function コンパイル処理完了後に実行するコールバック関数。
関数の第一引数はエラー時のオブジェクト、第二引数は成功時のHTML文字列を返す。

サンプルコード

const pug = require('pug');

pug.render(`
doctype html
html(lang="ja")
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		title="Page Title"
	body
		h1="Page Title"
		p
			| Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur mollitia repellendus quibusdam amet veritatis,
			br
			| excepturi pariatur natus quia alias exercitationem a consequuntur labore, libero quasi iste quaerat quis velit.
`, {
	pretty : true
}, (error, html) => {
	console.log(html);
});

pug.renderFile

構文

pug.renderFile(path, options, callback)
引数名 型 説明
第一引数
必須		 path string コンパイルするPugファイルのパス。
第二引数 options object コンパイルする際のオプション。
詳しくは共通オプションを参照。
第三引数 callback function コンパイル処理完了後に実行するコールバック関数。
関数の第一引数はエラー時のオブジェクト、第二引数は成功時のHTML文字列を返す。

サンプルコード

const pug = require('pug');

pug.renderFile('foo/bar.pug', {
	pretty : true
}, (error, html) => {
	console.log(html);
});

共通オプション

各メソッドの第二引数で指定するオプションは、次の共通するオプションを指定することができます。

プロパティ 型 初期値 説明
filename string Pug 例外発生時やinclude、extendで使用するコンパイル時のファイル名。
basedir string includeやextendで指定するパスのルートパス。
通常includeやextendを使用するPugファイルから見た相対パスだが、basedirを指定するとそのbasedirで指定したパスがルートとなるため、include "/templates/base"のようにルート相対パスで指定することもできるようになる。
doctype string 出力されるHTMLにDoctype宣言が含まれない場合に自動的に挿入するための指定。
また指定した値によって閉じタグの処理などが自動的に行われる。
指定可能な値は次のページを参照。
Pug: Doctype Shortcuts
pretty boolean
string		 false 出力されるHTMLにインデントを付けるかどうか。
falseを指定するとインデントは行われず、'  'のように文字列を指定すると対象の文字列でインデントを行う。
また、'\t'を指定すると、タブでインデントが行われる。
filters object undefined Pugのフィルターにカスタマイズしたフィルターを定義することができる。
filter : {
  フィルター名 : function(text, options) {
    処理
  }
}
といった感じで指定し、Pug上で:フィルター名や :フィルター名(引数)といった感じで実行する。
第一引数はPugで実行した際の入れ子にした値、第二引数は実行した際のフィルター名(引数)で指定した引数をプロパティとして参照される。
詳しくは次のページを参照。
Pug: Custom Filters
self boolean false ※ 不明
debug boolean false デバッグ用にstdoutに処理内容が記録される。
compileDebug boolean true コンパイル時にエラーが発生した際にエラーメッセージを表示するかどうか。
globals string[] ※ 不明
cache boolean false コンパイル時の関数をキャッシュする。
render系の関数を実行する時のみ機能する。
inlineRuntimeFunctions boolean false pug-runtimeモジュールを含めるかどうか。
name string 'template' テンプレート関数名。
compileClient関数を実行する際のみ機能する。

コマンドラインの場合

コマンドラインでコンパイルする場合は、pugコマンドを実行します。

  • ※ npmのパッケージ"pug-cli"がインストールされている必要があります。

構文

pug オプション ファイルまたはディレクトリ
  • ※ オプションの位置はpugコマンドの後または"ファイルまたはディレクトリ"の後のどちらでもかまいません。

例

次のコマンドはfoo/bar.pugファイルをコンパイルします。

pug foo/bar.pug

次のコマンドはsampleディレクトリ配下（サブディレクトリ含む）すべてのPugファイルをコンパイルします。

pug sample

次のコマンドは複数のファイルをコンパイルします。

pug foo/bar.pug baz.pug

次のコマンドはdestディレクトリに出力します。

pug foo/bar.pug --out dest

オプション

次のオプションが指定可能です。
なお、オプションはハイフン一つまたはハイフン二つのどちらかで指定できます。

オプション 説明 例
-h --help pugコマンドの使い方の情報を取得する。 pug -h
-V --version pugのバージョンを取得する。 pug -V
-O --obj pugのオプション（コマンドのオプションではなくコンパイルのオプション）を指定する。
JavaScriptのオブジェクト、JavaScriptファイル、JSONオブジェクト、JSONファイルの何れかで指定する。		 pug -O '{"doctype": "html"}' foo.pug
pug -O options.js foo.pug
-o --out コンパイル後のファイルを出力する先のディレクトリパス。 pug -o dest foo.pug
-p --path ※ 不明
-P --pretty インデントを行う。 pug -P foo.pug
-c --client ブラウザで実行可能にするためのJavaScriptコードにコンパイルしてJavaScriptファイルを生成する。
実行するときはtemplate関数を呼び出す。		 pug -c foo.pug

<script src="foo.js"></script>
<script>
    (function() {
        const html = template(window);
        console.log(html);
    })();
</script>
-n --name -cまたは-cで生成されたJavaScriptファイルからコンパイルの関数を実行する際の関数名。
省略した場合は"template"という名前になる。		 pug -c -n bar foo.pug

<script src="foo.js"></script>
<script>
    (function() {
        const html = bar(window);
        console.log(html);
    })();
</script>
-D --no-debug デバッグを行わないでコンパイルするかどうか。 pug -D foo.pug
-w --watch ファイルを監視して更新されたらコンパイルを実行する。 pug -w foo.pug
-E --extension コンパイル後のファイルの拡張子を指定。
省略すると.htmlで出力される。		 pug -E php foo.pug
-s --silent ログを出力しない。 pug -s foo.pug
--name-after-file ※ 不明
--doctype Doctype宣言がない場合に指定したDoctype宣言をコンパイル時に挿入する。
指定可能な値は次のページを参照。
Pug: Doctype Shortcuts		 pug foo.pug --doctype html

pugコマンドのオプションは一部のみ説明しています。
説明しきれていないオプションについては、次のページをご覧ください。
npm: pug-cli

Gulpの場合

Gulpでコンパイルする場合は、まずgulp-pugモジュールを読み込みます。

  • ※ npmのパッケージ"gulp-pug"がインストールされている必要があります。

ファイルからコンパイルする場合はpug関数を使用します。

pug(オプション)

次のコードを書いて"gulpfile.js"ファイルに保存します。

const gulp = require('gulp');
const pug  = require('gulp-pug');

gulp.task('pug-compile', () => {
	gulp.src('./**/*.pug').pipe(pug()).pipe(gulp.dest('./dest'));
});
  • ※ Gulpはバージョン3系とバージョン4系で書き方が多少異なります。
    このコードはバージョン3系の書き方です。
  • ※ Gulpの書き方についてはここでは説明しません。

次のコマンドを実行することでコンパイルが実行されます。

gulp pug-compile

pug関数のオプション

pug関数の第一引数には次のオプションが指定できます。

プロパティ 型 初期値 説明
filename string Pug 例外発生時やinclude、extendで使用するコンパイル時のファイル名。
basedir string includeやextendで指定するパスのルートパス。
通常includeやextendを使用するPugファイルから見た相対パスだが、basedirを指定するとそのbasedirで指定したパスがルートとなるため、include "/templates/base"のようにルート相対パスで指定することもできるようになる。
doctype string 出力されるHTMLにDoctype宣言が含まれない場合に自動的に挿入するための指定。
また指定した値によって閉じタグの処理などが自動的に行われる。
指定可能な値は次のページを参照。
Pug: Doctype Shortcuts
pretty boolean
string		 false 出力されるHTMLにインデントを付けるかどうか。
falseを指定するとインデントは行われず、'  'のように文字列を指定すると対象の文字列でインデントを行う。
また、'\t'を指定すると、タブでインデントが行われる。
filters object undefined Pugのフィルターにカスタマイズしたフィルターを定義することができる。
filter : {
  フィルター名 : function(text, options) {
    処理
  }
}
といった感じで指定し、Pug上で:フィルター名や :フィルター名(引数)といった感じで実行する。
第一引数はPugで実行した際の入れ子にした値、第二引数は実行した際のフィルター名(引数)で指定した引数をプロパティとして参照される。
詳しくは次のページを参照。
Pug: Custom Filters
self boolean false ※ 不明
debug boolean false デバッグ用にstdoutに処理内容が記録される。
compileDebug boolean true コンパイル時にエラーが発生した際にエラーメッセージを表示するかどうか。
globals string[] ※ 不明
cache boolean false コンパイル時の関数をキャッシュする。
render系の関数を実行する時のみ機能する。
inlineRuntimeFunctions boolean false pug-runtimeモジュールを含めるかどうか。
name string 'template' テンプレート関数名。
compileClient関数を実行する際のみ機能する。

サンプルコード

const path = require('path');
const gulp = require('gulp');
const pug  = require('gulp-pug');

gulp.task('pug-compile', () => {
	gulp.src('./src/*.pug').pipe(pug({
		basedir : path.resolve(dirname, 'src'),
		pretty  : '\t'
	})).pipe(gulp.dest('./dest'));
});

Pug逆引きリファレンス一覧へ戻る