Pug超入門 - どん底から這い上がるまでの記録

この記事は以前書いた記事の続きになります。

www.pytry3g.com

今回はPugのインストールから簡単なコードを書いてコンパイルするまでをやってみます。

関連リンク
Pug
コードを書く
- index.pug
コンパイル
- index.html
Electronの起動

Pug

f:id:pytry3g:20180729170312p:plain

pugとは

HTMLの生成を簡単にできるNode.jsベースのテンプレートエンジンです。テンプレートエンジンとはざっくり言うと、特定の処理をおこなうテンプレートと表示させたいデータ（文字列や数値、タグ）を合わせることにより、HTMLを作成する仕組みのことです。

特徴

Pugには以下のような特徴があります。

タグは使わない、代わりに改行やインデントで階層を表現する。
変数やif文、ループが使える
ファイルを分割して、別ファイルをインクルードできる。

インストール

PugはNode.jsで動いているのであらかじめNode.jsをインストールする必要があります。Node.jsのインストールについては以前書いた記事で既にインストールしています。

コマンドプロンプトを開いて以下のコマンドをたたくとPugをインストールできます。

npm i pug-cli

私はグローバルではなくローカルでインストールしたいので、前に作ったpug-tutorialという作業ディレクトリに移動してからコマンドを実行しています。

コードを書く

pugのインストールができたので、コードを書いてみます。ファイルの拡張子はpugです。

作業ディレクトリのput-tutorialにindex.pugという名前で作りました。

index.pug

下のコードはindex.pugの中身です。pythonみたいにインデントが使われていて親近感がわきますね。

doctype html
html
  head
    meta(charset='utf-8')
    title Pug Example
    
  body
    h1 HelloWorld

htmlと違ってタグで囲まれず、インデントと改行で階層を表現していることがわかります。

コンパイル

コードが書けたらコンパイルしてPugをHTMLに変換します。

下のコマンドを実行すると、index.htmlが生成されます。

pug index.pug -P

オプションを-Pとすることにより、見た目がきれいなHTMLができます。

index.html

コンパイルして生成されたHTMLファイルの中身です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pug Example</title>
  </head>
  <body>
    <h1>HelloWorld</h1>
  </body>
</html>

Electronの起動

試しにPugから生成されたHTMLをElectronを使って表示させてみます。

Electronの詳細についてはこちら。

前と同じようにElectronを起動するには下のコマンドです。

npm start

起動するとこんな画面がでます。

f:id:pytry3g:20180729193418p:plain

ちょっと見づらいですが、ちゃんとタイトルも見出しもコードに書いてあるように表示されています。

ここまで、Pugのインストールから簡単なコードを書いて、コンパイルまでをしてみました。今後、Pugの文法について勉強したものを記事として書く予定です。

おしまい。

関連リンク

Pug