Getting started with jade

Remarks#

Pug (formerly known as jade) is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Produces HTML
Supports dynamic code
Supports reusability (DRY)

Home page

Repository on GitHub

Versions#

version	release date
0.0.2	2010-07-03
1.0.0	2013-12-22
1.11.0	2015-06-12

Installation or Setup

Before to launch you to code with Pug, you need to have some prerequisits.

You will need to install:

NodeJS with NPM
ExpressJS (optional)

After installing NodeJS, you can check in your terminal the correct installation doing:

$ node -v

If successful, it will print the number of Node’s version.

To install Pug into your project, the preferred and easy way is through NPM (Node Package Manager). If you are familiar with that, simply execute this line of code in your Terminal:

$ npm install pug

If you want to install globally, you can type:

$ npm install pug-cli -g

and run with

$ pug --help

Syntax

Pug (old name is Jade) is a clean, whitespace sensitive syntax for writing HTML. Here is a simple example:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Produces following output as HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Here are the rules to render Pug to HTML code:

By indenting the text, the HTML tree will be build. indenting could be used with spaces or tabs. This could not be mixed!
HTML tags are written without < and >. Attributes are places between round brackets.
Comment could be made with // or . Comments with //- are not visible in the rendered HTML.
With #{ } will an offered model generated: #{header} #{user.username}.
The # (hashtag) without braces will a div element created with the text as ID. Example #myID will be rendered as <div id="myID"></div>.
With a . (point) will a div generated with a class attribute. Example: .myClass will be rendered as <div class="myClass"></div>
With = (equality sign followed by a space), a variable will be retrieved. Exaple: h1= title
A != (not equal to) retrieved a variable without escaping.
A - (hyphen) allows you to write JavaScript. Example: - console.log("foo");
Linking to an external file can as follow: script(src="/js/chat.js")
Inline script could by using this script..
A directive for adding the basic layout: extends ../layout.
At layout.pug happens the inserting by using block content
Use of partials could on two ways:
1. by partial: != partial(template file name/options).
2. By include: include ../includes/footer
The inverse of include is extend. This allows from a page “html block parts” to send to a layout page for example: extend layout
Concatenating happens with the + (plus) or # (hashtag) char. The plus is used at JavaScript code. The hashtag in HTML and renders the content: `p The name is: #{myName}

Using pug with Node.js

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));

Options

filename Used in exceptions, and required when using includes
compileDebug When false no debug instrumentation is compiled
pretty Add pretty-indentation whitespace to output (false by default)