EJSでサイトの共通部分を静的にジェネレートする

以前にも共通部分の作り方を色々紹介したのですが、今回はEJSでの作成方法を紹介します。

以前紹介したのは以下の記事です。

更新するのが面倒！サイトの共通部分を簡単に作る様々な方法

サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあ...

webdrawer.net

2014.08.26

EJSを使う方法

EJSとは

EJSとは「Embedded JavaScript templating」の略で、JavaScriptを使用してHTMLマークアップを生成できるテンプレート言語とのことです。

EJS -- Embedded JavaScript templates

'E' is for 'effective'. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize thi...

ejs.co

gulpをインストール

EJSを使うにはいくつか方法がありますが、今回はgulpを使ってEJSを実行しようと思います。gulpの導入手順は以下のページを参考に。

タスクランナー「gulp」の導入手順（Windows）

前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。

webdrawer.net

2014.06.03

EJSに関するパッケージをインストール

gulpをインストールしたら、次にパッケージをインストールします。
パッケージは以下の2つ。

npm install --save-dev gulp-ejs//EJS
npm install --save-dev gulp-rename//ejsの拡張子をhtmlにする

念のためバージョンはこちら

"gulp-ejs": "^5.1.0",
"gulp-rename": "^2.0.0"

フォルダ構成

フォルダ構成はこのようにします。フォルダ構成によってはこの後のpackeage.jsonやgulpfileの記述方法のパス部分が変更になります。

dest（書き出し用ファイル）
src（開発用）---ejs
gulpfile.js
node_modules
package.json
package-lock.json

そして、gulpfile.jsは以下のように記述します。

const gulp = require("gulp");
var ejs = require("gulp-ejs");
var rename = require("gulp-rename");

//EJS(テンプレートエンジン)
gulp.task("ejs", function(done) {
    gulp.src(
       ["src/ejs/**/*.ejs",'!' + "src/ejs/**/_*.ejs"] //参照するディレクトリと出力を除外するファイル
    )
    .pipe(ejs())
    .pipe(rename({extname: ".html"})) //拡張子をhtmlに
    .pipe(gulp.dest("dest/")); //出力先

    done();
});

EJSの実行

ターミナルで「gulp ejs」を実行するとsrcで作成したファイルがdestフォルダに書き出されます。またgulpfile.jsで設定したように、src内でファイル名に（_）アンダーバーがついたファイルは書き出しされません。

EJSでのincludeの記述方法

EJSでのincludeは以下のように記述します。

<%- include ('common/_header'); %> //パスの部分は読み込みたいEJSファイルの位置で変更する

includeする際の.ejsの拡張子は省略可能のようです。

EJSファイルは普通にHTMLの記述が出来るので、include部分以外は普通のHTMLを記述することが出来ます。

というわけでEJSの基本的に使い方でした。
このままだと表示確認が大変だったり、せっかくビルドするならsassを使いたいなと思うのでそこらへんの設定方法も調べていこうと思います。