Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Preprocessing HTML using pug

Friday, September 23rd, 2016 by Servage

pug-templatePug is a templating engine that aims to make writing HTML files faster and easier. In fact, Pug could be said to be an HTML preprocessor. You have probably heard or used CSS preprocessors like Sass or Less. Pug is very similar for HTML; you write it using a special syntax and compile it into plain HTML. Let’s have a look at how easy using Pug is and why you should consider using it.

In this article we will not set up a Pug development environment, but instead we will talk about what Pug is and in what situations it can be a good addition to your technology stack.

What is Pug?

If you have never heard about Pug, it may be due to the fact that the project was recently renamed from Jade to Pug due to a trademark conflict. Other than the name change, Pug is the same as Jade used to be. If you were familiar with Jade, you also know how to use Pug.

As mentioned earlier, Pug is a library that turns a special type of HTML into regular HTML. More specifically, it’s a JavaScript library that can be installed using npm. Because Pug is used outside of the browser, it requires NodeJS to run. In fact, Pug is currently expanding into a standalone that can be run inside the browser. However, this features is in early development and only supports modern browsers, so it is recommended to use Pug with NodeJS.

More than just basic HTML

Although Pug is often used to write HTML using a new exotic syntax, it is much more than just that. Pug extends HTML by allowing you to use advanced features within Pug syntax. For instance, you can declare and use variables, use loops and conditional statements. You can set a variable and later check if that variable is true, and based on the result render a different block of HTML. Thanks to features like this, static HTML can be made dynamic.

Extending with JavaScript

Pug is also reusable. You can write code templates using JavaScript, and include those templates anywhere you want as often as you want. You can use these templates to quickly write pages that need identical data multiple times. This can be useful for displaying data such as contact information.

Simple syntax

Pug features a Python-like syntax that is strict about indentation. Whereas content is put inside tags in HTML, Pug relies on correct indentation instead of tags. A simple example: “h1 Header 1” is compiled into “<h1>Header 1”</h1>”. If you want to use nested tags, you have to write them on multiple lines, and this is where correct indentation comes into play or otherwise Pug will get confused.

The good thing about a strict syntax is that it forces developers to write consistent code using widely accepted conventions. If this type of syntax sounds appealing to you, or if you want to extend HTML with loops and if-else statements, templates and more, Pug may be a perfect library for you.

Preprocessing HTML using pug, 4.1 out of 5 based on 9 ratings
Categories: Software & Webapps, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.