WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Pug(Jade)

Pug【パグ】(旧名称Jade【ジェード】)はHTMLのテンプレートエンジン

公式サイト
Getting Started – Pug

GitHub
github.com

PugはNode.jsで動いているのでNode.jsをダウンロードする
Node.js

Pugをインストールする

コマンドを入力

npm i pug-cli -g

インストール確認

pug --version

Pugのバージョンが表示されれば成功している

index.pugを作成

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="style.css")
    title Pug(Jade)の練習
  body
    header.header
      h1.title Pug(Jade)の練習
    main.main
      h2.label Pugファイル(.pug)を作成する
      h2.label Pugファイル(.pug)をHTMLにコンパイルする

Pugは閉じタグがない
改行+インデントで要素の入れ子を作る
要素(+属性)、半角スペース、タグの中のテキストといったように書く

Pugファイル(.pug)をHTMLにコンパイルする

コマンドを開き、index.pugがあるディレクトリまで移動し、下記コマンドを打つ

pug index.pug

成功するとindex.htmlが作成される

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style src="style.css"></style><title>Pug(Jade)の練習</title></head><body><header class="header"><h1 class="title">Pug(Jade)の練習</h1></header><main class="main"><h2 class="label">Pugファイル(.pug)を作成する</h2><h2 class="label">Pugファイル(.pug)をHTMLにコンパイルする</h2></main></body></html>

下記コマンドを打つ
と改行・インデントがついたHTMLに整形してくれる

pug index.pug --pretty

整形されたソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="style.css"></style>
    <title>Pug(Jade)の練習</title>
  </head>
  <body>
    <header class="header">
      <h1 class="title">Pug(Jade)の練習</h1>
    </header>
    <main class="main">
      <h2 class="label">Pugファイル(.pug)を作成する</h2>
      <h2 class="label">Pugファイル(.pug)をHTMLにコンパイルする</h2>
    </main>
  </body>
</html>

参考サイト
blog.mismithportfolio.com