テンプレートエンジンpugを使って、LP用テンプレートを作った話

pugとは、何?

pugとは、htmlを出力するためのテンプレートエンジンです。

pugを使うには、gulpのインストールとgulp pugの設定が必要になります。

なぜ、テンプレートを作ろうと思ったか?

特にECモールのLP用のコーディングは、ほぼどのページでも共通のパーツが多いです。

少しでも早く作業を効率化するために、作成しました。

テンプレート作る際に適している「extends」

まず、ベースとなるpugを作成します。

gista55b486fc929988c50f398b83a4ffeb6

ファイルごとに違うコンテンツを入れたいものには、[block 名前]で書きます。

ベースとは異なるpugを作成します。 そこに、▽を書きます。

gistb65941748e4de39e7043d84fc3535b31

※pugを書く際は、インデントが正しくないと、コンパイルできませんので、注意してください。

[参考]私がpugを勉強する際に見ているサイト

ゴリラでもわかるJade改めPug入門

→こちらのサイトは分かりやすくて、いつも、分からなくなったら、見ています。

そもそも、なぜ、pugを使うようになったのか?

今働いている会社が、pugでコーディングが必須です。htmlはダメです。

pugの方が、プログラマーの人たちがやりやすいらしいです。