As with the SASS preprocessor, Pug uses an interpreter, a program or script that translates a Pug template into HTML. This course will use the npm package
pug-cli, which will allow you to compile files from the command line. This is similar to using the
sass package from the SASS: Fundamentals course.
pug-cli package to install the Pug interpreter:
npm install pug-cli
You can install the package in a specific directory, or globally if you use the
-g flag during installation. If you want to know the version of the package 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
Let's look at how the interpreter works. To do this, create an index.pug file with the following contents:
doctype html html(lang='en') head 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 template using Pug. link(rel='stylesheet' href='./styles/app.css') body h1 Pug template p | 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've seen Pug markup, you'll have no trouble figuring out what's going on here. This is important because it lowers the entry threshold for people familiar with HTML syntax.
Now it's time to compile this code. To do that, you just have to enter the command
pug and pass the path to the file you want to compile. If no other options are entered, the file will be compiled automatically under the same name and in the same directory.
pug index.pug --pretty
<!DOCTYPE html> <html lang="en"> <head> <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"> </head> <body> <h1>Pug template</h1> <p> My first template using Pug. It'll make it easier for me to design layouts for pages. </p> </body> </html>
By default, pug translates the code into minimized HTML. The spaces between tags, tabs, and line feeds have been removed. This is handy when developing, but, when you're learning, it's important to see the full, unadulterated result. Luckily, we have the
--pretty option for this. If you're sure about your code, just remove it.
In development, compiled files are often kept separate from source files. This is convenient because it means development is done 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 to the directory that the compiled file should be sent to.
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, then you can use their full names.
pug index.pug --pretty --watch --out ./build/
A complete list of commands can be displayed using the command
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.