はじめに

インストール ¶

Pug は npm で利用できます

$ npm install pug

概要 ¶

Pug の一般的なレンダリングプロセスは簡単です。pug.compile() は Pug ソースコードをコンパイルして、データオブジェクト (「locals」と呼ばれます) を引数として取る JavaScript 関数を作成します。その結果の関数をデータと一緒に呼び出します。そうすると voilà! Pug はデータを使用してレンダリングした HTML の文字列を返します。

コンパイルされた関数は再利用でき、さまざまなデータセットを使用して呼び出すことができます。

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

const pug = require('pug');

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

Pug はコンパイルとレンダリングを 1 つのステップに組み合わせた pug.render() 系列の関数も提供しています。ただし、render が呼び出されるたびにテンプレート関数が再コンパイルされるため、パフォーマンスに影響を与える可能性があります。または、render で cache オプションを使用して、コンパイルされた関数を内部キャッシュに自動的に格納できます。

const pug = require('pug');

// Compile template.pug, and render a set of data
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"