PUG(was JADE)使い倒しメモ

# 概要

[公式ドキュメント](https://pugjs.org/api/getting-started.html)では分かりにくいPUGの応用記法について

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

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

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

`#[]`を使用するとインラインでタグを挿入することができる。これは入れ子も可能。
→[PUG > Interpolation > Tag Interpolation](https://pugjs.org/language/interpolation.html#tag-interpolation)

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

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

```HTML: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](https://pugjs.org/language/attributes.html)
→[PUG > Attributes > Boolean Attributes](https://pugjs.org/language/attributes.html#boolean-attributes)

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

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

```HTML:HTML
<input type="text" value="" placeholder="text" size="10">
```

`&attributes`を使うことで連想配列のkeyとvalueをそのまま属性名と値として使用できる。
→[PUG > Attributes > &attributes](https://pugjs.org/language/attributes.html#attributes)

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

```PUG: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: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](https://www.npmjs.com/package/jstransformer)）とフィルターに使いたい各モジュール（→[JSTransformers](https://github.com/jstransformers)）をnpmインストールすることで利用できる。

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

```Markdown:readme.md
# PUG

+ PUG was JADE.
+ PUG is BEAUTIFUL.

```

```PUG:PUG
include:markdown-it readme.md
```

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

→[jstransformer-markdown-it](https://github.com/jstransformers/jstransformer-markdown-it)

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

```stylus: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:PUG
style
  include:stylus common.styl
```

```HTML: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](https://github.com/jstransformers/jstransformer-stylus)

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

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

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

→[jstransformer-babel](https://github.com/jstransformers/jstransformer-babel)
→[babel-preset-env](https://github.com/babel/babel-preset-env)

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

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

```HTML: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](https://github.com/jstransformers/jstransformer-pug)
→[jstransformer-highlight](https://github.com/jstransformers/jstransformer-highlight)

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

```PUG:PUG
include:html-minifier:pug index.pug
```

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