[Pug]ルートディレクトリを指定してincludeを手軽にする方法

こんにちは！のせっち@nosecchi01です！

Pugでincludeをする際に、階層が深くなると../../をたくさん書かないといけなくなり見にくいので、ルートディレクトリを指定して見やすくする方法をご紹介します。

Gulpを使います。
Gulpの知識が全くない方は以下の記事をどうぞ！
（有料ですが、合わなければ返金も可能です。）

作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】｜のせっち｜note

※ 当noteは発売から一週間だけ480円で公開していました。現在は値上げしましたが、値上げ後に3万字以上のコンテンツ追加を行っています。 noteをチラ見してみて「思ってた…

note.com

前提

下記のようなディレクトリ構成だとします。

src配下にpageフォルダとpugフォルダがあります。
pugフォルダ内で各種コンポーネントを作成し、pages配下のページでincludeしていってページを作成します。

通常ですと、下記のようにincludeしていくはずです。

include ../pug/layout/_header
include ../pug/layout/_footer

aboutページの場合はもう一個深いです。

include ../../pug/layout/_header
include ../../pug/layout/_footer

../../と続けても問題はないのですが、ルートディレクトリを指定してincludeを見やすくしましょう！

gulpfile.jsに一行追加するだけ

gulpfile.jsに一行追加するだけでOKです。

const { src, dest } = require("gulp");
const pug = require("gulp-pug");

const compilePug = (done) => {
  src(["./src/**/*.pug", "!./src/**/_*.pug"])
    .pipe(
      pug({
        pretty: true,
        basedir: "src/pug", // 追加
      })
    )
    .pipe(dest("./dist"));
  done();
};

module.exports = {
  pug: compilePug
}

これで下記のように書くことができます。

include /layout/_header
include /layout/_footer

ルートディレクトリを指定したので、aboutページになっても全く同じになります！

include /layout/_header
include /layout/_footer

おまけ：pugのAPIを参照しよう！

他にもできることがあるんじゃないか？と思った方へ。
gulp-pugのgithubページを見てもoption関係は全然出てきません。

Pug APIのページを見てみましょう。

まとめ

• gulpfile.jsに一行追加するだけで、includeを手軽にできる。