gulp-ejsでhtmlファイルを楽に管理しよう
公開日: 2015.04.14
最終更新日: 2016.09.01
コーディング時に便利なタスクランナー「gulp」
何かと便利なプラグインがありますがその中でも、
最近注目されている「gulp-ejs」を使ってより制作を楽にしたいと思います！
「gulp-ejs」についてはググっても、英語サイトばかりがヒットして
あまり日本語での説明がないのが現状です。
なので、まだまだ勉強中ですが少しでも役に立てればと思います。
1.はじめに
gulpがインストールされていることを前提に始めます。
インストール方法が分からない場合は、
http://ics-web.jp/lab/archives/3290
http://www.unionnet.jp/develop/gulp/
上記URLに詳しく書かれているので参考にして下さい。
2.「gulp-ejs」のインストール
windows版で説明します。
こちらはコマンドプロンプトで下記を入力します。
npm install gulp-ejs --save-dev
そして、gulpfile.jsにタスクを書いてきます。
様々な情報を集めていった結果、
var gulp = require('gulp'),
ejs = require('gulp-ejs'), /* テンプレートを作る */
gulp.task('ejs', function () {
gulp.src(["./app/**/*.ejs","!./app/template/*.ejs"])
.pipe(ejs())
.pipe(gulp.dest("./dist"));
});
gulp.task('watch', function() {
gulp.watch(['./app/**/*.ejs'], ['ejs']);
});
gulp.task('default', ['watch']);
こんな感じでいいかとおもいます。
これで、
/app/以下の.ejsファイルを/dist/以下にhtmlとして吐き出し
/app/template/以下の.ejsファイルは/dist/以下に吐き出さないということになります。
さあこれで準備は整いました！
参考URL
https://www.npmjs.com/package/gulp-ejs
http://liginc.co.jp/web/html-css/html/144170
3.「gulp-ejs」で出来ること
「gulp-ejs」ではファイルをインクルードしたり、
一部を変数にして使い回したりと自由な設計をすることが出来ます。
では早速いじってみましょう。
3-1.ファイルをインクルードする
まず/app/template/以下に_head.ejsを作成します。
中味はとりあえずこんな感じで。
タイトル
次に_foot.ejsを作成します。
中味はシンプルでいきましょう。
これで、上下の共通テンプレートが出来ました。
あとは中身の設定です。
index.ejsに上下の共通テンプレートを読む記述を書いていきます。
<% include template/_head %> なかみだよ <% include template/_foot %>
<% include %>
この記述でファイルをインクルード出来ます。
これで、コマンドプロンプトでgulpをwatch状態にすれば
更新が掛かったタイミングで/dist/以下にindex.htmlが吐き出されます。
3-2.変数も使っちゃう
これだけでも便利なのですが、変数を使うとページごとに
titleやmeta情報も設定出来て更に便利になります。
_head.ejsの中身をちょっと変えます。
<%= pageTitle %>
titleタグの中身を変数<%= pageTitle %>に変えます。
この中に各ページごとのタイトル名が入る感じですね。
更にindex.ejsも変更します。
<% var pageTitle = "いんでっくす"; %><% %><% include template/_head %> なかみだよ <% include template/_foot %>
この状態でgulpを実行すると、吐き出されたものは以下になります。
いんでっくす なかみだよ
無事にtitleタグ部分にページ名が入りました。
またここで、ポイントなのが、<% var pageTitle = “いんでっくす”; %>の後ろに行をまたいだ<% %>をつけること。
これをつけることによって吐き出されたときの空行を消すことが出来ます。
ただちょっと見栄えが良くないのでもっと良い方法があればいいのですが・・！
3-3.if文も使っちゃう
条件分岐もいけます。
例えば、よくあるページごとにナビゲーションがアクティブ状態に
なっているものもejsの分岐でいけます。凄い！
/template/に_header.ejsを作ります。
タイトル
- <% if(nav == 'nav1'){ %><% }else{ %><% } %>ナビ1
- <% if(nav == 'nav2'){ %><% }else{ %><% } %>ナビ2
- <% if(nav == 'nav3'){ %><% }else{ %><% } %>ナビ3
- <% if(nav == 'nav4'){ %><% }else{ %><% } %>ナビ4
これで変数navの値によって分岐する条件文ができました。
続けて、index.ejsに手を加えます。
<% var pageTitle = "いんでっくす"; %><% var nav = "nav1"; %><% %><% include template/_head %> <% include template/_header %>なかみだよ
<% include template/_foot %>
これを吐き出すと、以下になります。
なかみだよ
見事にナビ1の部分だけにclassが付いています！
4.最後に
「gulp-ejs」を使うことでPHPを使うことなく
簡単なインクルードや分岐が出来るので是非活用して、
楽しくコーディング&こんなことも出来るんだぜアピールをしていきましょう！
