Help us understand the problem. What is going on with this article?

人生初のpugをやった時につまづいたこと

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")

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

extendsが難しい

最初、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の引数は、一つ指定するなら全部指定する必要がある。

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タグも同様。

(余談)gulpのver.4からの仕様が変わったことに戸惑い

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away