フロントエンド

【フロントエンド】Pugの使い方&環境構築

はじめに

PugはシンプルなHTMLを複数ページ必要な時などに共通のテンプレートパーツを使うことで効率よくコーディングを進めることができます。
今回はそんなPugの環境構築や使い方を紹介していきます。

Pugとは

Pug(パグ)とはHTMLを簡単に記述できるようにするテンプレートエンジンです。
PugではHTMLの階層構造をインデントで表現のが特徴です。

Pugは長らくJade(ジェイド)という名称で使用されていたのですが商標登録されていることがわかりJadeからPugという名称に変更になったという経緯があります。
長くWeb業界に携わっている方にはJadeという名称に馴染みがある方もいるのではないでしょうか?

環境

Node14.18.2
npm6.14.15
Pug3.0.2

Pugの環境構築

ここからPugを使用するための最小構成での環境構築を紹介します。

package.jsonの作成

package.jsonを作成します。

npm init -y

Pugのインストール

npm i -D pug

ここまででpackage.jsonは以下のようになります。

{
  "name": "pug-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "pug": "^3.0.2"
  }
}

Pugファイル作成

sample.pugを作成し下記を記述する。
ここではDOCTYPE宣言、言語コード、文字コードとHTMLの基本的な構文を記述しています。

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")

出力後のHTMLは下記のような形になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
</html>

Pugの動作確認

sample.pugをコンパイルしてHTMLを出力してみます。
コマンドラインでコンパイルするためにpug-cliをインストールします。

npm i -D pug-cli

インストール後、コマンドライン内でpugコマンドが使用することができます。

pug ./sample.pug -o dist

上記コマンドを実行することでdistディレクトリが作成され、その直下にsample.htmlが出力されます。
出力後のHTMLは下記のような形になります。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"></head></html>

ディレクトリ構成としては下記のようになっています。

dist
┗ sample.html
package.json
package-lock.json
sample.pug

まとめ

以上でPugを使用した最小構成での実行環境を作成しました。
Pugファイルをコンパイルする他の方法としてgulpやwebpackを使用した方法などもあります。
これらを使用した環境構築方法は今後別の記事で紹介させていただきます。

-フロントエンド