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)のように引数を指定することもできます。

以上です。

Pugとは

Pugのインストール

PugからHTMLに変換する

基本的な使い方

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

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

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

ID属性は#を付ける

クラス属性は.を付ける

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

|を使うと改行になる

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

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

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

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

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

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

HTMLに出力されるコメント

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

制御文

case~when

each, if~else

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

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

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

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

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

ID属性は`#`を付ける

クラス属性は`.`を付ける

`|`を使うと改行になる

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

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

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

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

`case`~`when`

`each`, `if`~`else`

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

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

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