Pug（パグ）というのは、htmlを効率的に書くためのテンプレートエンジンです。

拡張子は「.pug」となります。

例えば以下の様なhtmlがあった場合、

Pugなら以下のようになります。

classやidがあればdivは省略可能です。

ちなみに↑のhtmlのほう、imgタグを囲ったdivの閉じタグを忘れています。

こういうのになかなか気づかないもんですが、Pugなら閉じタグは必要ありません。

また、コーディングが終わった後に、最初のdivは横幅100%にして、画像とテキストをflexでいい感じにしたいっていうときがあります。

htmlの場合divで囲ってまた閉じて･･･とかします。今度はclassの閉じ(“)を忘れてるぞ！ポンコツか！

Pugの場合テキストと画像のインデントを下げてその上に新しく箱(div)を足すだけです。classも閉じるとかそういうの要りません。

あとはgulpなりpreprosなりでコンパイルすればおっけーです。

他にも変数の使用や条件分岐、ヘッダー用pugを作ってインクルードさせることも可能なので便利です。