Register to get access to free programming courses with interactive exercises

Installation HTML: Preprocessor Pug

As with the SASS preprocessor, the Pug uses an interpreter, a program, or a script that translates a Pug template into HTML.

This course will use the npm package pug-cli, allowing you to compile files from the command line. It is similar to using the sass package from the SASS: Fundamentals course.

Use the pug-cli package to install the Pug interpreter:

npm install pug-cli

You can install the package in a specific directory or globally with the -g flag during installation. If you want to know the package version you installed, type pug --version.

At the time of writing, the following version is in use:

pug version: 2.0.4
pug-cli version: 1.0.0-alpha6

The first template

Let us look at how the interpreter works. To do this, create an index.pug file with the following contents:

doctype html
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    link(rel='icon' type='image/x-icon' href='favicon.ico')

    title My first template using Pug.

    link(rel='stylesheet' href='./styles/app.css')

    h1 Pug template
      | My first template using Pug.
      | It'll make it easier for me to design layouts for pages.

Even if this is the first time you see Pug markup, you will have no trouble figuring out what we do here. It lowers the entry threshold for people familiar with HTML syntax.

Now it is time to compile this code. To do that, we enter the command pug and pass the path to the file you want to compile.

If we enter no other options, the file will be compiled automatically under the same name and in the same directory:

pug index.pug --pretty
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>My first Pug template</title>
    <link rel="stylesheet" href="./styles/app.css">
    <h1>Pug template</h1>
      My first template using Pug.
      It'll make it easier for me to design layouts for pages.

Pug translates the code into minimized HTML by default. It removes the spaces between tags, tabs, and line feeds. It is handy in development but not in learning. During studying, you better see the complete and unadulterated result. Luckily, we have the --pretty option for this. If you are sure about your code, remove it.

In development, compiled files are often kept separate from source files. It is convenient because it means we develop in one directory, and the files that result from compilation, which will go to the server, are in another directory. In pug-cli, we use the -o for this purpose, giving the path where we send the compiled file:

pug index.pug --pretty -o ./build/

When developing, compiling files after each save is very convenient. We use the -w flag for this. After that, the process will constantly monitor the file and compile whenever there are changes. Altogether, your learning projects may look like the following:

pug index.pug --pretty -w -o ./build/

If these flags are too complex initially, you can use their full names:

pug index.pug --pretty --watch --out ./build/

A complete command list can be displayed using the pug --help command.

Additional assignments

  1. Install the npm package pug-cli
  2. Compile the file from the example
  3. Try using different tags

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.