Edited at

[Pug] HTMLを効率よくコーディングする

HTMLのコーディングを楽にしてくれるNode.jsパッケージを紹介します。

Pug

https://pugjs.org/api/getting-started.html

今回使用したNode.jsパッケージのバージョンは下記の通りです。


Node.jsパッケージ

gulp: 4.0.0

gulp-pug: 4.0.1


Pugとは

PugはHTMLを効率よくコーディングするためのテンプレートエンジンです。もともとはJadeという名前で呼ばれていました。


Pugのインストール

Node.js をインストールしてください。次に、package.jsonがあるフォルダに移動して、下記のコマンドを実行してください。

$ npm install


PugからHTMLに変換する

*.pugファイルを*.htmlファイルに変換するには、下記のコマンドを実行してください。

$ gulp pug


基本的な使い方

ソースファイルはこちら


<>カッコなしで記述ができる


Pug

p Pug Test



HTML

<p>Pug Test</p>



インデントを付けると入れ子になる


Pug

body

p Pug Test


HTML

<body>

<p>Pug Test</p>
</body>


属性は()カッコを付ける


Pug

a(href="index.html") index link



HTML

<a href="index.html">index link</a>



ID属性は#を付ける


Pug

#elmId01



HTML

<div id="elmId01"></div>



クラス属性は.を付ける


Pug

.cln01



HTML

<div class="cln01"></div>



最初の文字列はタグとして変換される


Pug

p

test01 test01
test02 test02
test03 test03


HTML

<p>

<test01>test01</test01>
<test02>test02</test02>
<test03>test03</test03>
</p>


|を使うと改行になる


Pug

p

| test01 test01
| test02 test02
| test03 test03


HTML

<p>

test01 test01
test02 test02
test03 test03
</p>


JavaScriptのオブジェクトのようにスタイルを指定できる


Pug

p(style={"color":"red","font-weight":"bold"}) test01



HTML

<p style="color:red;font-weight:bold;">test01</p>



JavaScriptの配列のように複数のクラス属性を指定できる


Pug

#elmId01(class=["cln01","cln02","cln03"])



HTML

<div class="cln01 cln02 cln03" id="elmId01"></div>



=を使うと文字列がエスケープされる


Pug

p= "<script>alert('XSS');</script>"



HTML

<p>&lt;script&gt;alert('XSS');&lt;/script&gt;</p>



disabledをbooleanで指定することができる


Pug

input#elmId101(type="button" value="test01" disabled=true)



HTML

<input id="elmId101" type="button" value="test01" disabled>



checkedをbooleanで指定することができる


Pug

label(for="elmId021") test021

input#elmId021(type="radio" name="test02" value="test021" checked=false)
label(for="elmId022") test022
input#elmId022(type="radio" name="test02" value="test022" checked=true)


HTML

<label for="elmId021">test021</label>

<input id="elmId021" type="radio" name="test02" value="test021">
<label for="elmId022">test022</label>
<input id="elmId022" type="radio" name="test02" value="test022" checked>


HTMLに出力されないコメント


Pug

//- Comment01

#elmId01


HTML

<div id="elmId01"></div>



HTMLに出力されるコメント


Pug

// Comment02

#elmId02


HTML

<!-- Comment02-->

<div id="elmId02"></div>


JavaScriptのように変数を-で指定できる


Pug

- var url = "index.html";

a(href=url) index link


HTML

<a href="index.html">index link</a>



制御文


case~when


Pug

- var url = "index.html";

case url
when "index.html"
p index.html
when "sub.html"
p sub.html
default
p default.html


HTML

<p>index.html</p>



each, if~else


Pug

- var langList = [{code:"en",name:"English"},{code:"jp",name:"Japanese"},{code:"zh",name:"Chinese"}];

- var defaultLang = "jp";
each lang in langList
if lang.code == defaultLang
li language:#{lang.name}(default)
else
li language:#{lang.name}


HTML

<li>language:English</li>

<li>language:Japanese(default)</li>
<li>language:Chinese</li>

#{}で変数を出力することができます。


include*.pugファイルを追加できる


Pug(head.pug)

meta(charset="utf-8")

title Pug Test


Pug(index.pug)

doctype html

html(lang="ja")
head
include head.pug
body
p Pug Test


HTML

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pug Test</title>
</head>
<body>
<p>Pug Test</p>
</body>
</html>


extends*.pugファイルを拡張できる


Pug(template.pug)

doctype html

html(lang="ja")
head
meta(charset="utf-8")
title Pug Test
body
p Pug Test
block content


Pug(index.pug)

extends template.pug

block content
p extend content

block prepend content
p extend prepend content

block append content
p extend append content



HTML

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pug Test</title>
</head>
<body>
<p>Pug Test</p>
<p>extend prepend content</p>
<p>extend content</p>
<p>extend append content</p>
</body>
</html>

blockを使用した箇所に拡張するタグの纏まり(ブロック)を追加できます。block prependはブロックの前に追加します。block appendはブロックの後に追加します。


mixinで定義したブロックを追加できる


Pug

mixin content1

P mixin content1

mixin content2(label)
P mixin content2 #{label}

doctype html
html(lang="ja")
head
meta(charset="utf-8")
title Pug Test
body
p Pug Test
+content1
+content2('arg2')



HTML

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pug Test</title>
</head>
<body>
<p>Pug Test</p>
<P>mixin content1</P>
<P>mixin content2 arg2</P>
</body>
</html>

+でmixinのブロックを追加します。content2(label)のように引数を指定することもできます。

以上です。