GulpでPugの環境を構築!静的HTMLサイトを効率的に作ろう

GulpでPugの環境を構築する方法です!

同列に語られがちなHTMLのテンプレートエンジンであるEJSと近いかと思いきや、意外とDreamweaverのテンプレート機能と近いという感覚でした。

使えるようになれば、静的なHTMLサイトの構築が楽になるのは間違いないので、時間がある時にでも触ってみてください。

はにわまん
PubはHTMLと書き方が変わりすぎて最初は苦労するかもしれません...

GulpでPugを導入してみる

最小構成で考えると、必要なパッケージはgulpgulp-pugの2つになります。

コピーnpm install -seve-dev gulp
コピーnpm install -seve-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に記載しています。

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

階層によって構造を理解している

スペースであったりタブによって、小要素と親要素の関係を理解しているっぽいです。

以下のように書いてしまうと、htmlheadがそれぞれのタグで作られちゃいます。

コピーhtml(lang='ja')
head

Pugで記載する時に親子関係を作りたかったら以下のようにタグなどで並列に記載しないで階層構造を作るようにしましょう。

コピー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の良いところだと思います。分割もしやすい印象でした。(もちろん役割に応じてテンプレートを複数作ってもいい)

書き方にちょっと癖があるので最初は大変かもしれませんが、長い目で見ると楽になるはずです(効率化ってだいたいこんな感じのが多い)。時間がある時にでもぜひ触ってみてください!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事