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

PUG(was JADE)使い倒しメモ

More than 1 year has passed since last update.

概要

公式ドキュメントでは分かりにくい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

lightcafe_gr
全国にグループ会社を持つIT企業です
https://www.lightcafe.co.jp/
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
No 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
ユーザーは見つかりませんでした