PugをHTMLで記述する

2019.08.18

基本的にはHTMLタグで記述して、一部だけPugのインクルードの機能などを使いたいということがあったので、可能かどうか試してみました。

サンプルコード

まずはGulpの環境を用意します。
プロジェクトのディレクトリに移動して、package.jsonを作成します。

cd プロジェクトディレクトリのパス
npm init

今回使用するgulp、gulp-pug、gulp-plumberをインストールします。

npm install gulp gulp-pug gulp-plumber --save-dev

gulpfile.jsを作成して、以下のように記述します。

gulpfile.js

var gulp    = require('gulp'),
    plumber = require('gulp-plumber'),
    pug     = require('gulp-pug');

gulp.task('pug', function() {
  return gulp.src(['pug/**/*.pug', '!pug/**/_*.pug'])
    .pipe(plumber())
    .pipe(pug({
      pretty: true,
      basedir: './pug'
    }))
    .pipe(gulp.dest('./'));
});

pugディレクトリ内のPugファイルをコンパイルして、プロジェクトルートにHTMLファイルを生成する想定です。

pugディレクトリと_includeディレクトリを作成して、その中に共通で使用するテンプレートファイルを作成します。
まずはページ全体のレイアウト用の_layout.pugですが、各共通ファイルをインクルードするのでPugの記法で記述します。

pug/_include/_layout.pug

block variables
doctype html
html(lang="ja")
  head
    block head
      include /_include/_head.pug
  body
    block header
      include /_include/_header.pug

    .contents
      block content

    block footer
      include /_include/_footer.pug

次にheadの内容になる_head.pugですが、各ページでtitleとdescriptionを設定できるように一部だけPugの記法にしてみます。

pug/_include/_head.pug

<meta charset="utf-8">

title #{pageTitle}
meta(name="description"  content=pageDescription)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

残りの_header.pugと_footer.pugはHTMLタグで記述します。

pug/_include/_header.pug

<header>
  <p>ヘッダーです</p>
</header>

pug/_include/_footer.pug

<footer>
  <p>フッターです</p>
</footer>

これで共通部分のテンプレートファイルの用意ができました。
次にこれらのテンプレートを使用するファイルを作成します。

pug/index.pug

extends /_include/_layout.pug
append variables
  -
    var pageTitle = 'ページタイトル';
    var pageDescription = 'ページ説明文';

block content
  <div class="test">
    <p>コンテンツ内容です。</p>
    ul
      - for (var x = 0; x < 3; x++)
        li item#{x}
  </div>

_layout.pugの継承とtitleなどの変数宣言はPugの記法ですが、コンテンツ部分は基本HTMLタグでの記述にして、一部動作テスト用にPugのfor文も入れています。

Pugファイルの用意が一通り完了しましたので、コンパイルを実行します。

gulp pug

以下のように意図した形にコンパイルできました。
(見やすいように改行位置やインデントなど調整しています。)

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <meta name="description" content="ページ説明文">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <p>ヘッダーです</p>
    </header>
    <div class="contents">
      <div class="test">
        <p>コンテンツ内容です。</p>
        <ul>
          <li>item0</li>
          <li>item1</li>
          <li>item2</li>
        </ul>
      </div>
    </div>
    <footer>
      <p>フッターです</p>
    </footer>
  </body>
</html>

拡張子の変更

拡張子を.pugから.htmlに変更しても、意図した形にコンパイルできるか試してみます。
gulpfile.jsを以下のように変更します。

gulpfile.js

var gulp    = require('gulp'),
    plumber = require('gulp-plumber'),
    pug     = require('gulp-pug');

gulp.task('pug', function() {
  return gulp.src(['pug/**/*.html', '!pug/**/_*.html'])
    .pipe(plumber())
    .pipe(pug({
      pretty: true,
      basedir: './pug'
    }))
    .pipe(gulp.dest('./'));
});

コンパイル対象の拡張子を.htmlに変更しました。

次に各pugファイルの拡張子とコードを変更します。

pug/_include/_layout.html

block variables
doctype html
html(lang="ja")
  head
    block head
      include /_include/_head.html
  body
    block header
      include /_include/_header.html

    .contents
      block content

    block footer
      include /_include/_footer.html

_layout.pugはファイルの拡張子と読み込んでいる各テンプレートファイルの拡張子を変更しました。

_head.pugと_header.pug、_footer.pugは拡張子のみ変更します。
次にindex.pugの拡張子を変更します。

pug/index.html

extends /_include/_layout.html
append variables
  -
    var pageTitle = 'ページタイトル';
    var pageDescription = 'ページ説明文';

block content
  <div class="test">
    <p>コンテンツ内容です。</p>
    ul
      - for (var x = 0; x < 3; x++)
        li item#{x}
  </div>

継承するテンプレートファイルの拡張子も変更しています。

これでコンパイルを再度実行してみます。

gulp pug

特にエラーも出ないでコンパイルできましたが、以下のようにPug記法の一部が意図した形になっていませんでした。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    title #{pageTitle}
    meta(name="description"  content=pageDescription)
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <p>ヘッダーです</p>
    </header>
    <div class="contents">
      <div class="test">
        <p>コンテンツ内容です。</p>
        <ul>
          <li>item0</li>
          <li>item1</li>
          <li>item2</li>
        </ul>
      </div>
    </div>
  <footer>
    <p>フッターです</p>
  </footer>
  </body>
</html>

pug/_include/_layout.html

block variables
doctype html
html(lang="ja")
  head
    block head
      include /_include/_head.pug
  body
    block header
      include /_include/_header.html

    .contents
      block content

    block footer
      include /_include/_footer.html

_layout.pugはファイルの拡張子と読み込んでいる各テンプレートファイルの拡張子を変更しました。
_head.htmlは拡張子のみ変更して、再度コンパイルを実行してみます。

gulp pug

この場合は最初と同様、意図した形でコンパイルできました。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head><meta charset="utf-8">
    <title>ページタイトル</title>
    <meta name="description" content="ページ説明文">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <p>ヘッダーです</p>
    </header>
    <div class="contents">
      <div class="test">
        <p>コンテンツ内容です。</p>
        <ul>
          <li>item0</li>
          <li>item1</li>
          <li>item2</li>
        </ul>
      </div>
    </div>
    <footer>
      <p>フッターです</p>
    </footer>
  </body>
</html>

場合にもよりますが拡張子をhtmlとしたい場合、共通テンプレートとして使用するファイルはpug、各ページで使用するファイルはhtmlとするルールがよさそうです。
　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年10月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
2728293031