HTMLを超簡単に書けるPugとやらをまとめてみました！
入江開発室のメンバーの方から最近Pugというものを教えてもらい、実際に使ってみたら超簡単で超楽にHTMLが書けてしまったので、Pugについて深く知るためにまとめてみました！
Pugとは
PugはHTMLを簡単に書くためのテンプレートエンジンで、CSSでいうSassのようなものです。PugはNode.jsで動いており、一部書き方がJavaScriptっぽいところがあります。
※Saasを知らない人はこの記事がおすすめ ⇨ これからはcssはSassで書こう
Pugってどうやって書くの？
githubから引用してきます。
HTMLでこのように書きたいとすると、、、
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pug</title>
<script type="text/javascript">
if (foo) bar(1 + 5)
</script>
</head>
<body>
<h1>Pug - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
</div>
</body>
</html>Pugではこのように書きます↓↓↓
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.一般的に言われているPugのメリット
1: 閉じタグの記載忘れがなくなる
例えばpタグを書くときは`p これはpタグです`という風に書くので、開始タグや閉じタグという概念がありません。HTMLの閉じタグを忘れることはなくなります。
2: ファイルを分割管理できる
`include section/_header.pug`のように、includeを使ってファイルを読み込むことができます。それによってファイル分割をすることができます。ファイル分割をしすぎると何をやっているかよくわからなくなることがあるので注意！
3: 変数が使える
分かりやすい例があったので、コードを引用してきました。
この例はtitleを変数にしています。変数が使えると、コード修正する場合に簡単です。
- var title = "Pug（Jade）の説明ページ｜色々と説明するサイト";
doctype html
html(lang="ja")
head
meta(charset="UTF-8")
title #{title}
body
header
h1
a(href="#")
img.logo(src="img/logo.svg" alt=title)(引用: PugでHTMLコーディングを効率化・メリットと使い方を知る)
i4: 条件分岐やforループやmixinが使える
普通のHTMLでは条件分岐やforループやmixinは使えませんが、Pugなら使えます。
条件分岐の例はこんな感じ
- var title = "これはタイトルです";
case title
when "これはタイトルです"
h1 タイトル
default
p タイトルforループの例はこちら
- for (var x = 0; x < 3; x++)
li リスト#{x}もしくはこう
ul
each items in ["apple", "grape", "pineapple"]
li= itemsmixinはSassとおんなじ感じで書きました。+でmixinを呼び出すらしく、こんな感じです。
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
+pet('pig')(引用: PugでHTMLコーディングを効率化・メリットと使い方を知る)
Pugの始め方
1: とりあえずNode.jsをインストールする
Node.jsをインストールしている人は次にスキップしてください。
インストールしていない方はNode.js公式サイトでインストールしてください。
2: とりあえずPugをインストールする
Node.jsのインストールが完了している前提で話を進めます。
このコマンドでPugをインストールします！
$ npm i pug-cli -g3: とりあえず適当にPugファイルを作成する
とりあえずPugファイルを作成します。名前は`index.pug`とでもしましょうか。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title これはPugのテストです
body
h1 これはPugのテストh1です
p これはPugのテストpです。次にコマンドを叩いてHTMLに変換します。
pug index.pug --prettyこのコマンドを叩くと、同じディレクトリに`index.html`が生成されます！
Pugの使い方はこれだけ！あとは書き方を覚えるだけですなあ。。