Pugに入門してみる ~Hello, Pug!!編~

2020/09/01

Pugって？

HTMLを書くためのテンプレートエンジンです。
独自の記法を用いることで記述量を減らしたり,変数を使えたりとHTMLを効率的に書くためのいろいろな機能があります。
もともとはJade(ジェード)という名前でしたが,商標の関係でVer.2以降はPug(パグ)という名前に変更されたようです。

入門してみる

1. インストールする

Getting Started - Pug公式ドキュメント
 README - pug-cli
公式ドキュメントではpugをインストールしていますが,今回はpug-cliをグローバル環境へインストールしてpugコマンドを使えるようにします。

$ npm install pug-cli -g

インストールの確認

$ pug --version
# 実行結果
pug version: 2.0.4
pug-cli version: 1.0.0-alpha6

2. .pugファイルを作る

任意のフォルダ内で.pugファイルを作成します。

$ touch hello-pug.pug

ファイルを開き,記述していきます。

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Hello, Pug!!
  body
    h1 Hello, Pug!!

Pugの記法

HTMLタグには< >をつけずにそのまま記述する
属性のプロパティはタグのあとにカッコ()をつけ記述する
インデントでHTMLの構造を表現する

3. コンパイルする
```
$ pug hello-pug.pug
# 実行結果
rendered hello-pug.html
```
pug {ファイル}.pugと実行することでファイルをコンパイルして{ファイル}.htmlを出力してくれます。

出力されたファイルの中身を見てみると,1行でHTMLが出力されているのがわかります。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello, Pug!!</title></head><body></body></html>

このままでは見にくいので,—prettyオプションをつけて整形されたHTMLを出力します。

$ pug hello-pug.pug --pretty
# 実行結果
rendered hello-pug.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, Pug!!</title>
  </head>
  <body>
    <h1>Hello, Pug!!</h1>
  </body>
</html>

まとめ

インストールからHTMLの出力までの流れを掴むことが出来ました。
今回は細かい記法,機能については割愛させてもらいました。
色々機能ためして後日またアウトプットしたいと思います。

それではまた明日。

Pugって？

入門してみる

1. インストールする

2. .pugファイルを作る

3. コンパイルする

まとめ

参考ページ

関連記事