JadeからPugになって、移行しようと思って使ってはみたものの、
属性に指定した変数がちゃんと出力されなくて「まだバグが多いのかな」とか勝手に思ってたんですが、解決しました。
もともとJadeではこう書けた
タグの属性の値に変数を使うとき、 #{var} みたいな書き方しかできないと思い込んでました。
jade
- var charset = "utf-8";
meta(charset="#{charset}")
以下のようにも書けるんですね。（知りませんでした…なんで見落としてたのか）
jade
meta(charset=charset)
出力されるHTMLはいずれも以下のとおり。
html
<meta charset="utf-8">
Pugで出力した結果
pug
- var charset = "utf-8";
meta(charset="#{charset}")
「拡張子jadeをpugにしてgulp-jadeをgulp-pugに変えれば動くでしょ」と思っていたら
html
<meta charset="#{charset}">
なんでだぁ！？
原因がわからず「とりあえず、まだJadeでいいや」って思っていたんですが、ちゃんとリファレンスに古い記法だと書いてありました。
※属性の中で使えないだけで、外であれば今までどおり使うことが出来ます。
pug
p #{name}
解決策
とりあえずは以下のような書き方をしておけば、Jadeから問題なく移行できるのではないかと思います。
サンプル1
Jadeでも通用する書き方の繰り返しになってしまうんですが
pug
meta(charset=charset)
html
<meta charset="utf-8">
サンプル2
pug
- var css = "./assets/css/";
link(rel="stylesheet", href=css+"style.css")
html
<link rel="stylesheet" href="./assets/css/style.css">
サンプル3： "#{var}" を `${var}` にする
# を $ に変更するのはわかりやすいですが、
シングルクォートやダブルクォートではなくバッククォート（`）を使って書くという点。（ES6記法なんですね）
pug
- var link = 'hoge';
a(href=`before${link}after`)
html
<a href="beforehogeafter"></a>
#{var} を使っていなかった人なら問題なくPugに移行できるのかもしれませんが、なかなかうまくいかなくて困っている人がいたら、もしかするとこういうことかもしれません。