「Gulp 4」Pugの環境構築と知っておきたい書き方

Pugに入門してみよう

  • GulpでPugの環境構築をする方法とPugの書き方を紹介しています

Pug(パグ)とはHTMLを簡単に記述するためのテンプレートエンジンのこと
コーダーとして働いていると、どこかで必ず「Pug使えますか?」みたいに聞かれることがあるので、ざっくりと書き方だけでも知っておくと今後役に立つと思います。

ちなみに、PugはもともとJade(ジェイド)と呼ばれていたので、古い記事はJadeとなっていることが多いです。

それでは、環境構築から始めていきましょう。

環境構築の手順

今回はGulpというツールを使って、Pugを書いていく方法を紹介していきます。
もしGulp自体の環境構築がまだの方は、絶対つまずかないGulp 4入門(2021年版)インストールとSassを使うまでの手順を参考にしてみてください。

フォルダ構造

この記事と同じ環境を作りたい場合は、このようなフォルダ構造を作ってみてください。

「GULP-PUGフォルダ」直下に「gulpfile.js」「pugフォルダ」
「pugフォルダ」の直下に「index.pug」を作ってみてください。

Gulpのフォルダ構造

gulp-pugをインストール

GulpでPugを使う方法は簡単で以下のコマンドでインストールすればOKです。

$ npm install -D gulp gulp-pug

gulpfile.jsを編集

ご自分の環境に合わせてファイルパスを書き換えれば、これだけでPugを使えるようになります。

// gulpプラグインの読み込み
const gulp = require( 'gulp' );
// Pugをコンパイルするプラグインを読み込み
const pug = require( 'gulp-pug' );

gulp.task("default", function() {
  return (
    gulp
    .src([ 'pug/**/*.pug', '!pug/**/_*.pug' ]) // ①
    .pipe(pug({
      pretty: true // ②
     }))
    .pipe( gulp.dest( './' ) ) // ③
  );
});

ファイル内容を解説すると、以下のような感じです。

  1. pugフォルダ以下の拡張子がpugのものを全てチェックして、ファイル名の先頭に_(アンダースコア)があるファイルは無視してね。
  2. pugをhtmlに変換するときにフォーマットを整形してね。
  3. ルート直下にhtmlファイルを出力してね。

GulpでPugをコンパイルしてみる

環境構築も終わったところで、さっそくPugを使ってみましょう。

index.pugにこれをコピペしてみてください。ひとまず書き方は気にしないでOKです。

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body
    h1 Pugを書いてみよう

Gulpのタスクを実行してみましょう。

$ npx gulp

するとindex.htmlが生成されていると思います。

htmlファイルを生成

これで環境構築はおしまいです。次はPugの書き方について見ていきましょう。

初心者が覚えておきたいPugの書き方

インデントを使って書く

「PugはHTMLの階層構造をインデントで書いていく」というお作法があるので、インデントを守りながら書いていきましょう。(インデントがずれるとエラーになったりする)

h1 Pugを書いてみよう
div
  a ボタン
<h1>Pugを書いてみよう</h1>
<div><a>ボタン</a></div>

クラス、IDの書き方

クラスは「.」IDは「#」で書いていきます。emmetと同じ書き方なので分かりやすいですね。divは省略することができます。
また、属性は()で囲みます。

h1.title Pugを書いてみよう
.btn
  a(href="") ボタン

a(href="#")
  img(src="")
<h1 class="title">Pugを書いてみよう</h1>
<div class="btn"><a href="">ボタン</a></div>

<a href="#"><img src="">

テキストの書き方

テキストの書き方にはちょっとクセがあります。
複数行で書く場合は、インデントを下げてバイプライン( | )で区切ります。

// 1行で書く場合
p ほにゃらら、ほにゃらら、ほにゃらら、

// 複数行で書く場合
p
  |ほにゃらら、ほにゃらら、ほにゃらら、
  |ほにゃらら、ほにゃらら、ほにゃらら、

// 改行を入れる場合
p
  |ほにゃらら、ほにゃらら、ほにゃらら、
  br
  |ほにゃらら、ほにゃらら、ほにゃらら、
<!-- 1行で書く場合-->
<p>ほにゃらら、ほにゃらら、ほにゃらら、</p>

<!-- 複数行で書く場合-->
<p>
  ほにゃらら、ほにゃらら、ほにゃらら、
  ほにゃらら、ほにゃらら、ほにゃらら、
</p>

<!-- 改行を入れる場合-->
<p>ほにゃらら、ほにゃらら、ほにゃらら、<br>ほにゃらら、ほにゃらら、ほにゃらら、</p>

変数を使う

Pugの中で変数を定義して使うことができます。
ハイフンでこれからJavaScriptを使いますよって明示してから、変数を定義します。

- const text = "これが変数で定義したテキスト";
p #{text}です!
<p>これが変数で定義したテキストです!</p>

別ファイルの内容を取り込む

Pugは別のファイルに書いた内容を参照することができます。セクションごとにファイルを分けて書くことができるので効率的ですね。

Pugフォルダの中に「includes」フォルダを作り、その中に「header.pug」と「footer.pug」を作ってみましょう。

ファイルを追加

内容はこんな感じに書いてみてください。

include includes/header.pug
.contents
  p ここがindex.pugです。
include includes/footer.pug
footer
  h1 ここはフッターです。
header
  h1 ここはヘッダーです。

生成されたHTMLがこちら。
それぞれ別ファイルで書いたものが取り込まれてます。

<header>
  <h1>ここはヘッダーです。</h1>
</header>
<div class="contents">
  <p>ここがindex.pugです。</p>
</div>
<footer>
  <h1>ここはフッターです。</h1>
</footer>

レイアウト部分とコンテンツを分ける

「include」で共通部分を再利用できるようになったんですが、ヘッダーとフッターはどのページにも使いたいですし、毎回ページごとに書かないといけないのは面倒ですよね。ページが多ければ何度も書かないといけない。

なので、テンプレートを使ってもっと簡単に管理してみましょう。

テンプレートを使うと、共通する部分(レイアウト)を別のファイルまとめて、それぞれのページでは必要な部分(コンテンツ)だけを書くことができます。

まずは、「layoutsフォルダ」を作りその中に「_layout.pug」を作ります。

layoutフォルダを追加

ファイルの内容はこんな感じです。

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body
    include  ../includes/_header // ①

    .contents
      block contents // ②

    include ../includes/_footer // ③

コードを解説すると、

  1. _header.pugファイルを取り込む
  2. このファイルを継承したファイルに応じて、内容を変更できるように「block」を使う
  3. _footer.pugファイルを取り込む

block ブロック名とすると、そのblockの部分を、このテンプレートを適応させたファイルの内容に、置き換えられるようになります。

実際に「_layout.pug」を「index.pug」で取り込んでみましょう。

extends layouts/_layout
block contents
  p ここはindex.pugです

これでGulpのタスクを実行すると、「_header.pug」「_footer.pug」が取り込まれて、なおかつindex.pugの内容が反映されるようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>ここはヘッダーです。</h1>
    </header>
    <div class="contents">
      <p>ここはindex.pugです</p>
    </div>
    <footer>
      <h1>ここはフッターです。</h1>
    </footer>
  </body>
</html>

1回見ただけでは、いまいちピンとこないと思いますが、実際の案件ではこういうテンプレートだらけのファイルをみることになるので、時間があれば実際に手を動かして使ってみてください。

おわりに

GulpでPugの環境を構築する方法とPugの書き方について解説しました。

テンプレートを作ってそれを使い回しながら、コーディングすることができるのでかなり効率的にHTMLが書けるようになります。(慣れるまでは素のHTMLを書いた方が速く感じると思いますが、、)

Pugについてもっと詳しく知りたい方は、Pugの公式ドキュメントを参照してみてください!