Getting Started

Installation

Pug is available via npm:

$ npm install pug

Overview

The general rendering process of Pug is simple.pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.

The compiled function can be re-used, and called with different sets of data.


//- 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'
}));
// "Timothy's Pug source code!"

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

Pug also provides the pug.render() family of functions that combine compiling and rendering into one step. However, the template function will be re-compiled every time render is called, which might impact performance. Alternatively, you can use the cache option with render , which will automatically store the compiled function into an internal cache.

 const pug = require('pug');

// Compile template.pug, and render a set of data
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "

Timothy's Pug source code!

"
Categories: Tools - HTML

Leave a Reply

Your email address will not be published. Required fields are marked *