pug language code example

Example 1: what is pug template engine

Pug is a template engine for Node and for the browser. 
It compiles to HTML and has a simplified syntax, which 
can make you more productive and your code more readable.
Pug makes it easy both to write reusable HTML, as well as
to render data pulled from a database or API.

Example 2: pug template

$ npm install pug --save

Example 3: 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 4: 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.