gulp-ejs でHTMLの編集をカンタンにする

gulp-ejs でHTMLの編集をカンタンにする

  • 2017.04.25
  • ひらの

|^・ω・)/< こんにちは、ひらのです!

今回はHTML関連のお話です。
webページを作成しているとHTMLファイルがたくさん必要になることもあるかと思います。

そんな時に「EJS」を使うと楽に作業ができるようになるかもしれません。

今回は gulp を利用する想定で話を進めます。
gulpの導入・利用方法は賢人達がたくさんの情報を残してくれているので割愛します。
検索エンジンで「Gulp 使い方」って検索するときっとすぐ見つかります。

EJS とは

本家ページは下記からドウゾ
EJS

「Effective JavaScript templating」略して「EJS」です。

「テンプレート」を作って、HTMLを効率よく生成しよう! ってものです。

どんな時に役に立つ?

  • 共通のナビゲーションなどを利用する
  • HTMLファイルが5個以上になる(自分の限界)
  • 共通部分の変更をした際に、全ファイルをいっぺんに修正したい

こんなときはEJSを使うと良いと思います。

「ヘッダー部分」「フッター部分」「メニュー部分」など
部分ごとにテンプレート化しておき、

ヘッダー部分のejsファイルを1箇所変更すると、該当のテンプレートを使用している
HTMLが全て変更されます。

こうすることで変更漏れなどを防ぐことができます( ˘ω˘)

EJSを使う準備

  • gulp
  • gulp-ejs
  • gulp-rename

を使って、HTMLを生産してゆきます。
gulpfile.js に下記のように記述してgulpタスクを動かせるようにしておきます。

gulpfile.js

簡単に各行の説明
7行目: 「’ejs/**/*.ejs’」 で、ejsフォルダ内の「.ejs」ファイルを対象とします。
    ただし、「’!ejs/**/_*.ejs’」で _(アンダースコア) が付いたファイルを象外に…

9行目: ejs をコンパイルしてもそのまま「.ejs」拡張子のファイルになってしまうので
    gulp-rename を使って拡張子を「.html」に変更します。

10行目: コンパイルしたファイルをどこに置くかを書いています。
    今回はそのまま「ejs」フォルダと同じ階層にhtmlを並べます。

14行目: gulpの監視タスクを作成します。
    これを起動しておけば、上書き保存するたびにコンパイルされるようになります。

ejsファイルを作成する

index.ejs

上記の内容で「index.ejs」をコンパイルすると、
「index.html」が出来上がるかと思います。

ブラウザで表示してもいつも通りの htmlファイルです。

まずはコレを小分けにして行きます。

ざっくり2分割

bodyタグの間には、各ページ別々の内容が入ると思うので、その部分でざっくり2分割します。

_header.ejs

_footer.ejs

それぞれのファイル名の先頭に 「_」を付けて保存します。

先ほどの index.ejs は下記のように変更します。

「<% %>」の中で、先ほど2分割にしたファイルをそれぞれ呼び出しています。

この状態でコンパイルすると…
ブラウザには「index」と表示されました。

このページのソースを見てみると…
「_header.ejs」「index.ejs」「_footer.ejs」 の順で合体したファイルになっています。

index.htmlのみ、記述したいものは「index.ejs」に書く
前ページに適応したいものは「_header.ejs」や「_footer.ejs」に書く

という流れになります。

タイトルを変更してみる

index.ejs をコピーして… h1 の中を変更しつつ 「page-1.ejs」として保存します。

この状態でコンパイルすると…index.html と page-1.html が生成され、
どちらも h1 の中身以外は同じhtmlが生成されました。

index.html と page-1.html がある状態で
「_header.ejs」のタイトル部分を変更してコンパイルしてみます。

_header.ejs

index.html と page-1.html どちらのページもタイトルが「Hello world」になりました。
1つの修正で2ファイル同時に更新できました。

各ページでタイトルを少しだけ変えてみる

各ページのタイトルを 「○○ | Hello world」(○○はファイル名)にしたい場合は

index.ejs、page-1.ejs の各ファイルの先頭に下記の記述を足します。

index.ejs

page-1.ejs

そして、 _header.ejs のtitleタグ部分を下記のようにします
_header.ejs

この状態でコンパイルすると、
各ページのタイトルが option で指定したテキストに差し替わりました。

使い方いろいろ

先程はページタイトルを変更しましたが、
グローバルナビゲーションテンプレートにしておくと
ナビゲーションのリンクを一括で変更できたり、

scriptの呼び出しをテンプレートにしておくと
ファイルを追加したり、名前を変更したときに
HTMLファイルを1つ1つ変更しなくて良くなります。

ループや条件分岐もできる

for

if

まとめ

締切直前の忙しい時に変更漏れを多発する私のような人には本当に良いと思います。

導入にgulpを使用したりとEJS以外の知識も少しだけ必要になりますが、
gulpでSCSSを導入したり、bowerを使用したりとその他にできることも増えると思いますので
定食のお漬物くらいには齧っておいても損はないかと思います。

自分もまだまだ修行中です( ˘ω˘ )

最後に

私がお世話になりまくりなQiitaから、EJSのとっても参考になるページ
テンプレートエンジンEJSで使える便利な構文まとめ

今回の記事を書くうえでも大変お世話になりました。

PAGE TOP

PAGE TOP