Pug(旧Jade)の使い方

Pugとは

JadeというHTML、JSのテンプレートエンジン。商標関連で2.0からPugに名称変更したらしい。
記述の省略(タグで囲まなくてよい等)、ファイル分割可能、変数利用ができる、制御構文が使える。
mixinやextendも利用可能なので、HTML版Sassという感じです。

Emmetとの違い

Emmetはコード入力補助を主としたプラグインですが、Pugはテンプレートエンジンというのが最も大きな違いです。
具体的に、HTMLを1ファイルを記述するだけであれば、ビルド処理を行う分Pugのほうが手間ですが、複数ページで同じ記述のソースを共用や制御構文での制御等はEmmetではできないため、HTMLの管理という意味では圧倒的にPugを使う方が有効と言える。

テンプレートエンジンの利点

例えば、これまで全ページにまたがるナビゲーションの内容変更があり、ページ数は100ページ超とします。こういった場合の効率化を行う方法としては
1.SSI利用
2.PHPでのinclude
という方法がありました。
どちらの場合も初期設計段階で共通部分の変更を見越して設計する必要があります。
また、拡張子が1.の場合はshtmlになり、2.の場合は.phpになり、どちらもサーバでの利用要件を満たす必要があります。
テンプレートエンジンの場合はそもそもinclude機能があるため、例えばナビゲーション部分のみを変更し、ビルドすることで全ページに即座に反映されます。
つまり、ブラウザのアクセス時にincludeするのではなく、制作段階でincludeし、サーバにアップするのはあくまで静的コンテンツで済むということです。

インストール方法

Javascript製のテンプレートエンジンのためNode.jsのインストールが必須になります。
Node.jsは以下よりインストールしてください。
https://nodejs.org/en/
PugはCLIで管理するため以下よりPugのCLIをインストールします。

npm i pug-cli -g

Pugの基本記法

doctype htmlで宣言文を記述
改行しインデントすることでネストになる
タグ+半角スペースでタグ内のテキスト入力ができる
:+半角スペースでもネストになる
idは#、classは.でつなげて記述
属性は()内に記述

HTMLコンパイル

Pugで記述したファイルは.pugの拡張子で保存します。
.pugのファイルのあるフォルダに移動し

pug xxxx.pug

※xxxxには保存したファイル名が入ります。

これでコンパイルができますが、圧縮版でコンパイルされるため

pug xxxx.pug --pretty

とすると通常表記になります。

コメントを書く