pug template examples

Example 1: pug template

$ npm install pug --save

Example 2: watch pug files

pug -w . -o ./html -P

// Note in the above command, the -w option stands for watch,
//the dot tells Pug to watch everything in the current directory,
//-o ./html tells Pug to output its HTML in the html directory and the
//-P option prettifies the output.

//The way this is going to work is that we’ll write our Pug code in index.pug
//and have the pug-cli watch this file for changes. When it detects any,
//it will take the contents of index.pug and render it as HTML
//in the html directory.

Example 3: html pug

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.