PUG(was JADE)使い倒しメモ

概要

公式ドキュメントでは分かりにくいPUGの応用記法について

改行せずにタグを連続表記

PUG

p #[span(lang='en') PUG#[small (was JADE)]]は#[span(lang='en') BEAUTIFUL]

HTML

<p><span lang="en">PUG<small>(was JADE)</small></span>は<span lang="en">BEAUTIFUL</span></p>

#[]を使用するとインラインでタグを挿入することができる。これは入れ子も可能。
→PUG > Interpolation > Tag Interpolation

if文を使わずインラインでクラス名を出しわける

PUG

each val in [true, false]
  input(type = 'checkbox', checked = val)
  p(class = val ? 'active' : '') PUG is BEAUTIFUL

HTML

<input type="checkbox" checked>
<p class="active">PUG is BEAUTIFUL</p>
<input type="checkbox">
<p>PUG is BEAUTIFUL</p>

inputタグのcheckedはbool値を与えることでそのまま出しわけできる。
クラス名は三項演算子がそのまま使え、空になった属性は属性名ごと排除される。
これを利用すればif文を最低限まで減らすことができる。
→PUG > Attributes
→PUG > Attributes > Boolean Attributes

タグの属性名と値のセット自体を連想配列で与える

PUG

input(type = 'text')&attributes({value: '', placeholder: 'text', size: 10})

HTML

<input type="text" value="" placeholder="text" size="10">

&attributesを使うことで連想配列のkeyとvalueをそのまま属性名と値として使用できる。
→PUG > Attributes > &attributes

各状況における変数の利用方法

PUG

-
  let
    btnText = 'Button'
    btnTag = 'button'
    btnAtb = 'type'
button(type = 'button')= 'This is ' + btnText
button(type = 'button')= `This is ${btnText}`
button(type = 'button') This is #{btnText}
#{btnTag}(type = 'button')
button&attributes({[btnAtb]: 'button'})

HTML

<button type="button">This is Button</button>
<button type="button">This is Button</button>
<button type="button">This is Button</button>
<button type="button"></button>
<button type="button"></button>

テキストの一部として変数を利用する場合は色々な方法で挿入できる。
タグ名として変数を利用する場合、は#{変数}を使う。
属性名として変数を利用する場合は直接使えないので&attributesを利用する。

フィルターの利用法

カスタムフィルターの他、jstransformerを利用できる。
利用する場合、jstransformer本体（→jstransformer npm）とフィルターに使いたい各モジュール（→JSTransformers）をnpmインストールすることで利用できる。

MarkdownファイルをHTMLに変換してインクルード

readme.md

# PUG

+ PUG was JADE.
+ PUG is BEAUTIFUL.

PUG

include:markdown-it readme.md

HTML

<h1>PUG</h1>
<ul>
    <li>PUG was JADE.</li>
    <li>PUG is BEAUTIFUL.</li>
</ul>

→jstransformer-markdown-it

stylusで書いたコードをcssに変換してインクルード

common.styl

.header
  margin 0 0 10px
  font-size 2rem
  padding 10px
  & > .head
    display inline-block
    margin 0
    font-weight 900
    vertical-align middle

PUG

style
  include:stylus common.styl

HTML

<style>.header {
  margin: 0 0 10px;
  font-size: 2rem;
  padding: 10px;
}
.header > .head {
  display: inline-block;
  margin: 0;
  font-weight: 900;
  vertical-align: middle;
}
</style>

→jstransformer-stylus

PUG上に記述したES6をbabelで変換

PUG

script
  :babel(presets= ["env"])
    k=e=>e+e;

HTML

<script>"use strict";
k = function k(e) {
  return e + e;
};
</script>

→jstransformer-babel
→babel-preset-env

コードのシンタックスハイライトをビルドの時点で行う

PUG

:highlight(lang = 'html'):pug
  input(type = 'checkbox', checked = true)

HTML

<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">checked</span>=<span class="hljs-value">"checked"</span>/&gt;</span>

:pugでPUGコードをHTML化してから:highlightでハイライト用のタグを挿入している。
→jstransformer-pug
→jstransformer-highlight

あるPUGファイルのミニファイファイルを作る

PUG

include:html-minifier:pug index.pug

:pugでPUGコードをHTML化してから:html-minifierでミニファイしている。
この方法を使うとGulpなどのタスクランナーなしに（SublimeTextのOnSaveBuildなどだけで）ミニファイファイルを作成できる。
→jstransformer-pug
→jstransformer-html-minifier