🦒
【pugのメリット1】includeさせる
作成日:
2022/01/08
1
共通パーツを各ファイルに記述
まず、includeを利用する前にファイル毎に書く
(今回は「headerナビ」を追加)
現在の階層構造
webpack-tutorial
├dist/
| ├──css/
| | └──style.css
| ├──js/
| | └──bundle.js
| └──index.html
|
├node_modules/
├src/
| ├──images/
| ├──js/
| | ├──index.js
| | └──sub.js
| ├──scss/
| | └──style.scss
| └──templates/
| | ├──index.pug //headerナビを追加する
| ├──index.html
| | └──menu.pug //headerナビを追加する
|
├package-lock.json
├package.json
└webpack.config.js
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
body
header
ul
li
a(href="./index.html") TOP
li
a(href="./menu.html") MENU
h1 webpackチュートリアル
span (SCSSを追加)
img(src="/src/images/mountain.jpg", alt="")
img(src="/src/images/sea.jpg", alt="")
menu.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 メニュー | webpackチュートリアル
body
header
ul
li
a(href="./index.html") TOP
li
a(href="./menu.html") MENU
h1 メニュー
span (SCSSを追加)
img(src="/src/images/mountain.jpg", alt="")
img(src="/src/images/sea.jpg", alt="")
これらをwebpackを起動し、ファイル出力すると、各々以下のような表示になる。
ただし、片方だけheaderナビの内容を変えると、両者に差分が出てしまう。
この場合に、includeは有効。
共通パーツとして使用すれば、修正はincludeさせるファイルのみで変更可能になる。
(WordPressに詳しい方は、headerやfooterと同じようなものと捉えてOK)
includeファイルを作成する
webpack-tutorial
├dist/
| ├──css/
| | └──style.css
| ├──js/
| | └──bundle.js
| └──index.html
|
├node_modules/
├src/
| ├──images/
| ├──js/
| | ├──index.js
| | └──sub.js
| ├──scss/
| | └──style.scss
| └──templates/
| | ├──_headerNav.pug //追加
| | ├──index.pug
| ├──index.html
| | └──menu.pug
|
├package-lock.json
├package.json
└webpack.config.js
※includeさせている特別なファイルだと分かるように、_から始まるファイル名する
_headerNav.pug
header
ul
li
a(href="./index.html") TOP
li
a(href="./menu.html") MENU
incudeファイルを読み込む記述を追加する
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
body
//- ここから変更
include _headerNav.pug
//- ここまで変更
h1 webpackチュートリアル
span (SCSSを追加)
img(src="/src/images/mountain.jpg", alt="")
img(src="/src/images/sea.jpg", alt="")
menu.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 メニュー | webpackチュートリアル
body
//- ここから変更
include _headerNav.pug
//- ここまで変更
h1 メニュー
span (SCSSを追加)
img(src="/src/images/mountain.jpg", alt="")
img(src="/src/images/sea.jpg", alt="")
webpackを起動
npm run build
ブラウザで確認する
試しにincludeファイルを変更してみる
_headerNav.pug
header
ul
li
a(href="./index.html") 変更されたトップページ
li
a(href="./menu.html") 変更されたメニューページ
webpackを起動後、ブラウザで再度確認
変更したのはincludeファイルである_headerNav.pugだけにも関わらず、2ファイルとも変更されているのが確認できる。
事業会社にてコーダーをしています。制作は6年目。
インプットしたことをアウトプットしています。