GulpでPugの環境を構築する方法です！
同列に語られがちなHTMLのテンプレートエンジンであるEJSと近いかと思いきや、意外とDreamweaverのテンプレート機能と近いという感覚でした。
使えるようになれば、静的なHTMLサイトの構築が楽になるのは間違いないので、時間がある時にでも触ってみてください。
はにわまんPubはHTMLと書き方が変わりすぎて最初は苦労するかもしれません...
GulpでPugを導入してみる
最小構成で考えると、必要なパッケージはgulpとgulp-pugの2つになります。
npm install -save-dev gulpnpm install -save-dev gulp-pugフォルダ構成
フォルダの構成としては以下のような感じで作りました。pugファイルの位置はなんでもいいのですが、gulpfileでの変わってくるという感じですね。この記事のコピペで同様に進めたい方は下記のフォルダ構成を真似してもらえたらと思います。
pug
– common
— _layout.pug
index.pug
gulpfile.js
gulpfileのコード
では、実際にgulpfileにコードを書いていきます。めちゃくちゃシンプルで以下のように数行だけで実行させることができます。
var gulp = require( 'gulp' );
var pug = require( 'gulp-pug' );
gulp.task( 'pug', function() {
return gulp
.src([ 'pug/**/*.pug', '!pug/**/_*.pug' ])
.pipe(pug({
pretty: true
}))
.pipe( gulp.dest( './' ) );
});ザックリ解説すると、「pugフォルダ内の.pugの拡張子のファイルを変換対象にしてください、ただし、_（アンダーバー）から始まるファイルは変換させないでね。」という処理を行っているものになります。
Pugのコード
今回の例では以下のような感じで作ってみました。Pugの書き方のルールについては、後ほど紹介しています。ひとまずは実行できればなんでもOKです！
こちらはpugフォルダ内のindex.pugに記載しています。
doctype html
html(lang='ja')
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet', href='css/style.css')
title タイトル
meta(name='description', content='')
meta(name='keywords', content='')
body
#content
.inner
p Hello Pug!
script(src='js/script.js')これを実行してみます。実行するには、先ほどgulpで作成した以下のコマンドを実行します。
gulp pug以下のようなindex.htmlが出来上がるはずです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css"/>
<title>タイトル</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
</head>
<body>
<div id="content">
<div class="inner">
<p>Hello Pug!</p>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>Pugのレイアウトを作る
EJSもそうですが、この手のテンプレートエンジンは、効率的なコーディングができるようになることが導入の主な目的になります。
Pugはテンプレートを作って使い回すことが代表的な使い方のようです。なんとなくDreamweaverの感覚に近いかもしれません。
common/_layout.pugって名前で作成して、以下のような変数とかblockを配置します。
block value
doctype html
html(lang='ja')
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title #{title}
meta(name='description', content=description)
meta(name='keywords', content=keywords)
block addcss
body
block content
block addjsそして、index.pugにテンプレートを適応させてあげると以下のような記述になります。（この辺は説明するより実際に実行して変数を変更しながらどういった結果になるか確認した方が早いかもしれません。）
extend common/_layout
append value
- var title= "トップページ";
- var description= "ディスクリプション";
- var keywords= "キーワード,キーワード2,キーワード3";
append addcss
link(rel="stylesheet" href="css/index.css")
append addjs
script(src="js/index.js")
//- ページのコンテンツ
block content
#content
.inner
p Hello Pug!テンプレートでblockを配置したところにappendで定義した値が入ります。
append valueで定義している変数はJavaScriptの記述なので、行頭に「-（ハイフン）」を配置する必要があります。そして、テンプレート側で#{title}のような記述で変数の値を受け取っています。
このように1つテンプレートを用意しておくと、ページごとの変数と要素を用意するだけでファイルを量産していくことが可能になります。
初心者がつまづきがちなPugのルール
初めてPugを触った時に個人的にとまどったりつまずいた部分をまとめました。
Pugの公式ドキュメントは以下になりますので、詳しく理解したい方は公式を参考にしてください。
→ Getting Started – Pug
階層によって構造を理解している
スペースであったりタブによって、小要素と親要素の関係を理解しているっぽいです。
以下のように書いてしまうと、htmlとheadがそれぞれのタグで作られちゃいます。
html(lang='ja')
headPugで記載する時に親子関係を作りたかったら以下のようにタグなどで並列に記載しないで階層構造を作るようにしましょう。
html(lang='ja')
headタブかスペースで統一
Pugは記述が減る分、デリケートに扱ってあげないと壊れやすい特徴があるように思っています。
閉じタグがないので、先ほど紹介したようにスペースとかタブで階層構造を理解させてあげるのですが、このタブやスペースが混ざっていてもエラーになりがちです。
Pugで作成する時はタブかスペースのどちらかに統一するといいかと思います。わたしはタブで統一しています。
属性は「カッコ」で囲んで複数ある場合は「スペース」で区切る
画像を表現するなら以下のような感じです。
img(src="" alt="")1要素につき1行を使う
なんとなくEmmetっぽくli>a>img(src="" alt="")みたいな書き方ができると思っていました。これだとエラーになります。
Pugでは、1要素ごとに1行にしないと機能しないっぽいので以下のように書いてあげる必要があります。
li
a
img(src="" alt="")おわり
GulpでPugの環境を構築する方法です。
1つテンプレートを用意しておけばトップページから仮想ページまで使い回せるのがPugの良いところだと思います。分割もしやすい印象でした。（もちろん役割に応じてテンプレートを複数作ってもいい）
書き方にちょっと癖があるので最初は大変かもしれませんが、長い目で見ると楽になるはずです（効率化ってだいたいこんな感じのが多い）。時間がある時にでもぜひ触ってみてください！
