BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. gulp + Pug で静的ページコーディング
by 漢ムラタ 漢ムラタ

gulp + Pug で静的ページコーディング

gulp + Pug で静的ページコーディング

どうも、最近またポケモンGOに復帰しはじめた博多のポケおじことムラタです。
今年は今まで触ってこなかった色々な技術にも挑戦していきたいと思います。

そんなわけで今回は初めて「Pug」を使ってみたお話です。

「Pug」とは

まあGoogle先生にお伺いすればすぐ出てくるんですが、元々は「Jade」と呼ばれていたhtmlを効率的に記述するためのテンプレートエンジンで、Pugで記述した内容をhtmlとしてコンパイルしてくれます。
早い話がSassのhtml版だと考えれば分かり易いですね。

Pugの特徴・書き方

閉じタグが不要

Pugは通常のhtmlの書き方とは異なり、閉じタグを必要としませんし、なんならタグを囲む「<>」もいりません。
例えば

と記述したものをコンパイルすると

こんな感じでhtmlがコンパイルされます。
入れ子にしたい場合は改行してインデントするか、タグの後ろに「:」を入れて半角スペースを空けるとことでも可能です。後者の場合は1行でまとめられて出力されます。

ちなみに改行+インデントは絶対ルールなので、インデントじゃなくて半角スペース4つとかで処理しちゃうと容赦なくエラーが返ってきます。

あとsrcやaltなどの属性は「()」の中で指定して、内包するテキストは半角スペース空けて入力します。

classやidはcssと同じくタグの後ろに「#」と「.」で指定します。タグの指定が無いものはdivとして処理されます。

閉じタグは勝手に処理してくれるので閉じタグ忘れで表示が崩れちゃったという割と新人さんがやってしまううっかりも当然防げます。

書き方のルールに関してはEmmet使ったことある人なら似てるんですんなり受け入れられるんじゃないでしょうか?

ヘッダーやフッターなどの共通部分を外部ファイル化して読み込める

LPとか1ページものなら別に必要ないんですけど、複数のページがある場合非常に助かるのがこれです。
例えばヘッダーを「_header.pug」フッターを「_footer.pug」として別ファイルで管理して、読み込み元となるファイルから「include」で読み込むことが可能です。

例えば「_header.pug」の中身が

として。
それを読み込み元でincludeします。

こんな感じですね。include先の拡張子「.pug」は省略することができます。
これをコンパイルすると

このようになります。

変数が使える

これもかなり大きい恩恵といえるでしょう。
例えばページタイトルを変数として格納しておいて、それを読み込むようにしておけば、複数ページ構築した後に「やっぱりtitleこっちに変更してください」と言われてもちまちま1ページごと修正する必要もなく、タイトルの変数を修正するだけで全ページの対応が完了します。

冒頭の「– var title」でtitleの変数を定義しています。
そしてそれを出力したい箇所に「#{変数名}」とすることで、これをコンパイルすると

こうなります。
titleの部分に指定した値が出力していますね。

テンプレートの継承ができる

head内やヘッダーやフッターなどの基本となる大枠を読み込んでおいて、要所要所でCSSやjavascriptなど各ページ毎に異なる記述をしたい場合に使用します。

例えば基本の大枠を「_layout.pug」として下記の記述をします。

所々にある「block xxx」という箇所がページ毎に継承を行うことができる要素になります。今回指定しているのは変数として格納しているページタイトルとdescription(block var)、読み込む外部cssファイルとjsファイル(block cssとblock js)、コンテンツ部(block content)になります。

これを読み込み元で以下のように記述して継承させます。

冒頭の「extend _layout」で前述の「_layout.pug」の中身を読み込んでいます。
そして「append」で継承元(_layout.pug)のblock名を指定して、書き換える内容を記述します。

これをコンパイルすると

こうなります。
共通部分で新しく書き換えが必要な箇所が出てくればその都度「_layout.pug」でblockを指定して、読み込み元で「append」を指定しましょう。

分岐処理

例えばTOPページだけヘッダーのテキスト部分をh1にしてそれ以外はpにしたい時は以下のような形で分岐することも可能です。

まず先ほどの「_layout.pug」の変数に「top」を追加して、デフォルトの値を「false」にしておきます。

次に「_header.pug」の分岐したい該当部分を下記のようにします。

case top」で変数topの中身によって処理を分岐させます。
when “xxx”」で分岐条件を記述して、「default」でどれにも当てはまらなかった際の処理を記述します。

ちなみに今回caseを使用していますが、「if」も当然使えますので、そこは適宜使い分ければいいと思います。

最後に読み込み元のappendで「top」を「true」とします。

これで出力するとh1としてコンパイルされ、それ以外のページはpとなります。

まあ出来たことは出来たんですけど、これa以下の要素を2重に書かないといけないのがすごくモヤりますね。今回入れ子がaだけだったのでまあこのままでもいいかもしれませんが、仮にすごく深い入れ子だった場合、それを2回も記述するのはナンセンスです。

こういった場合、次の処理の方が適しています。

mixin

はい、出ました「mixin」です。
sass使ったことがある人なら必ず目にすることがあると思いますが、何度も使うような記述を定義しておいて好きなところに呼び出すことができます。
また引数を指定することで同じ記述でも部分的に変更を加えることも可能です。

まず新しく「_mixin.pug」を作ってmixinの処理をまとめられるようにしておきます。(もしくはmixinごとにファイルを分ける?)

内容は下記の通りです。

switch(tag=’p’)」でswitchという名前でmixinを登録して、引数のtagにデフォルト値として「p」を指定しています。

次に「_layout.pug」の冒頭にて「_mixin.pug」をincludeしておきます。
これで好きな場所に登録したmixinを呼び出すことができます。

そして先ほどのcaseの箇所を以下のように差し替えます。

「+mixin名()」で該当のmixinを呼び出すことができます。
分岐によって引数の値を変える訳ですね。未指定の場合はデフォルトの「p」が指定されます。
さっきよりだいぶスマートになりましたね。

繰り返し処理

for」や「each」を使って繰り返し処理を行うことが出来ます。
例えば

とすると

とコンパイルされます。
eachだとこういう使い方ができます。

これをコンパイルすると

こういった具合です。
リストなどの同じコードを繰り返し記述するときにこれらを使うことで、コードに修正が入っても工数が少なく済みますね。

他にも細かい機能はありますが、特に多く使いそうなのはこんな感じだと思います。

gulpでpugを実行

次にgulpを使ってpugファイルを更新した際に自動でコンパイルを実行するようにします。

gulpfile.jsの記述

まずnpmで「gulp-pug」をインストールしておきます。

gulpfileへの記述はこんな感じになっています。

ファイル名の頭に「_」がつくpugファイルは読み込み用のファイルなので更新してもコンパイルはしないようにしています。
また「lastRun」関数は意図的に使用しないようにして、更新の度に全pugファイル(読み込み専用ファイル除く)を処理するようにしています。
そうしないと読み込みファイルを更新しても読み込み元ファイルの処理ができなかったので…。

「pug」関数のオプション「pretty」はデフォルトは「false」で「true」にするとインデントを維持して人が見やすい状態でコンパイルしてくれます。
「true」だけだと半角スペース2つによるインデントになりますが、文字列を指定するとそれがインデントに使用されるようなので「’\t’」としておくとタブでインデントしてくれます。
あと公式のリファレンス見る限りどうも将来的にこのオプションは無くなる可能性があるようですね。そうなると圧縮一択になるということに…?

最後に

今年は新しい技術にチャレンジするということで初回はPugを触ってみたわけですが、やはりある程度仕様を理解していないと普通に組むより時間はかかってしまいますね。

ただ1,2回組んで慣れてしまえば構築スピードは上がるし、閉じタグ忘れも無くなり品質も保たれるし、パーツごとにファイルを分けられるので管理が楽になるなど、結構恩恵を受けられるのではないでしょうか。

最近9割くらいがWordpressによるサイト構築なので、今後Pugを使う機会はあまりないとは思いますが、なるべく使える機会があれば積極的に使っていきたいですね。(PugでWPのテーマファイルの作成できなくはないですが、正直そこまでやる必要はなさそうです)

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る