gulpを使ってSass(Less)を使ったことはあったが、pugはなんだかんだ一度もやったことがなかった。
会社ではPHPのみを扱っているので、今の所不便に感じる事は全くない。しかし、pugはどうやらタグのつけ忘れがないのが利点らしい。という噂を聞いたので、やってみた。

込み入った事をすると手間取った箇所があるので、今回はpugでつまづいた事をまとめるとする。

環境

gulp version: 4.0.2
gulp-pug ver 2.0.4

変数の設定が癖がある

一つだけ変数を定義する場合は

- var pageName = 'ページ名'

と、最初にハイフンを付ける必要があります。
ハイフンをまとめてつけることもできて、

-
  var page_title =　'テストページ'
  var page_desc = 'ページ詳細'

と設定できます。
そこで、躓いたのは、ハイフンのインデントも含めての変数だということ。

-
var page_title =　'テストページ'
var page_desc = 'ページ詳細'

これでは動かない。pugだと思ったら当たり前なんだけど、変数をつけたいと思ったら忘れてしまっていた。

HTMLのタグの中身として使う場合は

.class #{item.num}

と、#{変数} で表示される。
しかし、画像やリンクの中身、つまり括弧の中に変数表示する場合は

img(src="img/"+item.image+".jpg")

"+変数+"を間に挟み込み、かっこから出して表示させる必要がある。

最初、extendでファイルを読み込んでいたが、変数を設定したらエラーが出てしまった。
どうやらextendは表示する型のようなもので、blockで囲まれているところはextendされたファイルで書き換えができる*模様。

page2.pugにextends page1.pugのみが書かれている場合、
page1.html(page1.pugの書き出し先)とpage2.html(page2.pugの書き出し先)は同じ内容になる。

そして、page1.pugにblockで囲まれている箇所は、page2.pugで上書きすることが出来る。

なお、extendではなくextendsである。

mixin contents(site_name='サイト名',site_catch='キャッチフレーズ')
    .contents
        h1 #{site_name}
　　　　 p #{site_catch}

というmixinがあったとすると

+contents() //動く
+contents('ページ名') //動かない
+contents('ページ名,'ページキャッチ') //動く

というように、引数を指定するならば全て指定する必要がある。
PHPと違う仕様で戸惑いやすい。

<p>こちらでは<span>新着情報</span>をおしらせします。</p>

と表示させたい場合以下の場合ではpタグが囲ってくれなかった。

// 失敗：<p>こちらでは</p><span>新着情報</span>をお伝えします。
p こちらでは
span 新着情報
| をお伝えします。

どうやら、パイプラインの使い方を間違っていた模様。

// 成功: <p>こちらでは<span>新着情報</span>をおしらせします。</p>
p こちらでは
  span 新着情報
  | をおしらせします。

// 成功: <p>こちらでは<span>新着情報</span>をおしらせします。</p>
p
  |　こちらでは
  span
    |   新着情報
  | をおしらせします。

というように、spanはインデントをつける必要がある。brタグも同様。

pugを動かすのに半年ぶりぐらいにgulpを動かしたら、結構仕様が変わっていた。
returnで変数が必須になったり、exports.defaultでタスクを結合出来たり。
フロントのアップデートが早い事を実感した。