みなさんは、大量にある静的Webサイトを制作するとき、どうしていますか?

昔だと、Dreamweaverのテンプレート機能を利用していたかもしれません。
最近、もりさんは、Node.jsgulpで制作しています。

最初は、Sassimageminのついでに、使っていましたが、テンプレートエンジンで生成すると、間違いが少ないので、気に入りました。

Swigの選択について

EJSというテンプレートエンジンも有名だったので、迷いました。

LaravelのBladeやSymfonyのTwigなどのPHPフレームワークのテンプレートエンジンが頭にあったので、Swigというテンプレートエンジンを採用してみました。

gulpでgulp-swigを選択

gulpで使いたかったので、gulp-swigを選択しました。
もしかしたら、gulpと普通のSwigでもできるかもしれませんが、試していません、すみません。

swig

gulp-swig

前提の条件

すでにNode.jsをインストールしている状態で始めます。
また、npm initnpm install –save-dev package_nameなどは、適宜お願いします。

階層

階層は、以下ようなイメージで進めます。

Swigを利用したサンプルデータ

TwigBladeを使ったことがあれば、それほど迷うことはないと思います。
もりさんは、以下のサイトで調べることが多いです。

Swig – A Node.js and Browser JavaScript Template Engine

各ファイルの中身の例

だいたい、こんな感じになるのではないでしょうか。

project/app/template/template.html

project/app/index.html

Swigの使い方

ここに書いたTagだけで、ほとんどのことはできると思います。

変数の展開とフィルター

変数をテンプレート内に展開するためには、以下のように書きます。

また、変数に、フィルターを掛けて、変更することができます。
パイプ文字を繋げて、複数のフィルターをまとめて設定することもできます。

Swig » Documentation » Filters

extends

テンプレートを読み込みます。
extendsで、大枠になる親テンプレートを読み込んで、部分的に書き換えたい箇所を、変数やBlockで書き換えていきます。

block

親テンプレートで、blockを定義していると、後から上書きすることができます。

set

変数を定義します。
すでに設定されている場合は、上書きになります。

if

条件分岐できます。

for

オブジェクトや配列をループします。
繰り返すコンテンツなどを生成することができます。
forの中では、loop.indexなどの変数にアクセスできます。

loop.index 現在のindex(1から始まるindex)
loop.index0 現在のindex(0から始まるindex)
loop.revindex 終わりから始まる現在のindex(1から始まるindex)
loop.revindex0 終わりから始まる現在のindex(0から始まるindex)
loop.key オブジェクトの場合、現在のkeyを取得できます。配列の場合、loop.indexと同じになります。
loop.first loopの最初であれば、Trueになります。
loop.last loopの最後であれば、Trueになります。

include

別ファイルのコンテンツを読み込むことができます。
その時、一緒に変数を入れることも可能です。

parent

親テンプレートのblockを継承して、現在のblockに追加できます。

gulp-swigの問題

実は、このまま書き出しを行うと、いくつか問題が発生しました。

  • 変数などを定義したソースが、そのまま空いてしまう
  • テンプレートだけを更新した場合、書き出しに工夫が必要
  • htmの拡張子が、htmlになってしまう

そのあたりを考慮して、gulpfile.jsとgulpのプラグインを設定します。

変数などを定義したソースが、そのまま空いてしまう

一度、HTMLを圧縮し、それを整形して、余計な空きをなくします。
そのために以下のプラグインを導入します。

gulp-html-minifier HTMLを圧縮します。
gulp-prettify HTMLを整形します。

テンプレートだけを更新した場合、書き出しに工夫が必要

gulp-changedで変更を監視し、Browsersyncで自動更新している場合、テンプレートを更新しても、変更を検知しないので、反映されません。

gulp-ifを利用して、テンプレートを更新したときは、変更を検知せず全て書き出しを行います。

また、Swigのcacheをfalseにします。

gulp-if 条件分岐でフローを制御します。

htmの拡張子が、htmlになってしまう

普通はhtmを使うことなどないと思いますが、既存のコンテンツの追加修正で、htmのファイルのままでいたいのに、htmlになってしまいます。

gulp-renameを利用して、拡張子をhtmに戻します。

gulp-rename ファイル名変更します。

できたgulpfile

gulpfile.jsの中身は、こんな感じです。
できるだけ、Swigに関係しているものだけ切り取っています。

gulpfile.js

まとめ

これで、100ページくらいならさくっと作れます。
ただ、ページ数が多くなると、テンプレートを更新する場合、時間がかかるようになります。
個別にページを保存して確認し、タイミングで一気に書き出すようにしましょう。

現場のプロが教えるWeb制作の最新常識[アップデート版] (知らないと困るWebの新ルール)
久保 知己 酒井 優 塚口 祐司 前川 昌幸
エムディエヌコーポレーション (2016-06-01)
売り上げランキング: 49,123