Getting Started

インストール

Pugはnpmからインストールできます。

$ npm install pug

説明

Pugのレンダリングはとてもシンプルです。pug.compile()を使ってテンプレートをJavaScirpt関数としてコンパイルします。 その関数には、引数としてオブジェクト(localsといいます)を渡します。 生成された関数とデータから、一連のHTMLを返します。

生成された関数を再利用して、異なるデータセットで呼び出すことも可能です。

//- template.pug
p #{name}'s Pug source code!

const pug = require('pug');
 
// コンパイル
const compiledFunction = pug.compileFile('template.pug');
 
// データをレンダリング
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"
 
// その他のデータをレンダリング
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

pug.render()は、コンパイルとレンダリングを一度に実行する関数です。 しかし、テンプレート関数はrenderが呼び出される度に再コンパイルします。 そのため、パフォーマンスに影響が出るかもしれません。
renderにcacheオプションを指定することで、 コンパイル時に内部キャッシュに保存しておくこともできます。

const pug = require('pug');
 
// template.pugをコンパイルしてレンダリングする
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

手動コンパイル

Gulp等を使ってコンパイルすることが多いと思いますが、 手動コンパイルは以下の方法で行います。
上記例のテンプレートをtemplate.pug、 コンパイル設定をoption.jsとします。

$ pug -O ./opion.js ./test.pug

結果

$ pug -O ./opion.js ./test.pug
<p>Timothy's Pug source code!</p>
<p>Forbes's Pug source code!</p>
 
  rendered test.html

<p>Timothy's Pug source code!</p>
<p>Forbes's Pug source code!</p>