Pug is a template engine that helps develop HTML like a programming language.
Installation
I'm using yarn, but if you use npm, it also works.
$ yarn add -D pug
Pug is usually used with other bundlers or frameworks.
But in this posting, I'll use Pug directly. So, let's install one more package.
$ yarn add -D pug-cli
This package allows me to use a Pug in the terminal.
Create Template for HTML
Let's make some templates. We will create an HTML file with these templates.
In other words, these templates can be combined to create an HTML and can reusable.
template/header.pug
header This is a headertemplate/content.pug
div.content This is a contenttemplate/footer.pug
footer This is a footerIts syntax is similar to HTML and simple.
Create Pug for HTML
index.pug
Now, create a main pug file using these templates.
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Pug: Getting Started
body
include template/header
div.container
h1 This is a pug example
include template/content
include template/footerI use those templates that we made. It is quite simple and clean.
In addition... Isn't it easy?
Compile to HTML
Compile is so easy!!
$ pug index.pug
Then, Pug is translated to HTML!!!
If you are a newbie in the node environment, please try this.
$ ./node_modules/.bin/pug index.pug
Of course, you can use scripts with npm or yarn. Actually, I prefer this one.
Just add this code into the package.json.
"scripts": {
"build": "pug index.pug"
},And then, execute it.
$ yarn build
Result HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pug: Getting Started</title>
</head>
<body>
<header>This is a header</header>
<div class="container">
<h1>This is a pug example</h1>
<div class="content">This is a content</div>
</div>
<footer>This is a footer</footer>
</body>
</html>
Try to compare this to the pug file.
Now let's code the HTML more efficiently with Pug.
'Web > Etc' 카테고리의 다른 글
| [Gulp] Getting Started (0) | 2020.09.12 |
|---|---|
| [Babel] Getting Started (0) | 2020.09.10 |
| [Node] yarn (0) | 2020.08.30 |
| [Node] NPM (Node Package Manager) (0) | 2020.08.30 |
| [Node] Node.js (0) | 2020.08.30 |
댓글