0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>As with the SASS preprocessor, the Pug uses an interpreter, a program, or a script that translates a Pug template into HTML.</p>
1
<p>As with the SASS preprocessor, the Pug uses an interpreter, a program, or a script that translates a Pug template into HTML.</p>
2
<p>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<a>SASS: Fundamentals</a>course.</p>
2
<p>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<a>SASS: Fundamentals</a>course.</p>
3
<p>Use the pug-cli package to install the Pug interpreter:</p>
3
<p>Use the pug-cli package to install the Pug interpreter:</p>
4
<p>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.</p>
4
<p>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.</p>
5
<p>At the time of writing, the following version is in use:</p>
5
<p>At the time of writing, the following version is in use:</p>
6
<h2>The first template</h2>
6
<h2>The first template</h2>
7
<p>Let us look at how the interpreter works. To do this, create an<em>index.pug</em>file with the following contents:</p>
7
<p>Let us look at how the interpreter works. To do this, create an<em>index.pug</em>file with the following contents:</p>
8
<p>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.</p>
8
<p>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.</p>
9
<p>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.</p>
9
<p>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.</p>
10
<p>If we enter no other options, the file will be compiled automatically under the same name and in the same directory:</p>
10
<p>If we enter no other options, the file will be compiled automatically under the same name and in the same directory:</p>
11
<p>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.</p>
11
<p>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.</p>
12
<p>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:</p>
12
<p>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:</p>
13
<p>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:</p>
13
<p>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:</p>
14
<p>If these flags are too complex initially, you can use their full names:</p>
14
<p>If these flags are too complex initially, you can use their full names:</p>
15
<p>A complete command list can be displayed using the pug --help command.</p>
15
<p>A complete command list can be displayed using the pug --help command.</p>
16
<h2>Additional assignments</h2>
16
<h2>Additional assignments</h2>
17
<ol><li>Install the npm package pug-cli</li>
17
<ol><li>Install the npm package pug-cli</li>
18
<li>Compile the file from the example</li>
18
<li>Compile the file from the example</li>
19
<li>Try using different tags</li>
19
<li>Try using different tags</li>
20
</ol>
20
</ol>