テンプレートエンジンを使ったコーディングを試してみたかったので、今回はEJSを使ってみます。
Gulp.jsの準備
Gulp.jsは既にインストールしているので、今回はローカルにGulp.jsをインストールする所から行います。
Gulp.jsの導入は以前記事を投稿しているので、そちらをご参考ください。
Gulp.jsの導入～Sassのコンパイルまで試してみた | cly7796.net
コマンド プロンプトを起動して、作業ディレクトリへ移動します。
cd 作業ディレクトリ名
作業ディレクトリへ移動したら、プロジェクトファイルを作成します。
npm init
と入力して作成。
プロジェクトファイル作成後、
npm install gulp@3.8.11 --save-dev
と入力して、ローカルにGulp.jsをインストールします。
これでGulp.jsの準備完了です。
EJSの準備
npm install gulp-ejs --save-dev
と入力して、EJSをインストールします。
EJSをインストールが完了したら、作業ディレクトリ内にgulpfile.jsを作成して、以下を記述します。
var gulp = require('gulp');
var ejs = require('gulp-ejs');
gulp.task('ejs', function() {
gulp.src(
['./ejs/*.ejs', '!' + './ejs/_*.ejs']
)
.pipe(ejs())
.pipe(gulp.dest('./'))
});
これでejsが使用できるようになりました。
上記の設定だと、_ファイル名.ejsのファイルはhtmlが出力されないようになります。
EJSの作成
ejsディレクトリを作成し、その中にindex.ejsファイルを作成します。
ファイル内は以下のように記述します。
HTML
<% var metaTitle = 'タイトルA'; %> <% include common/_head %> <body> <p>テスト</p> </body> </html>
<% ～ %>にはスクリプトを記述します。
上記の場合、1行目はmetaTitleという変数に’タイトルA’を代入、2行目はcommon/_head.ejsというファイルを読み込む記述になります。
次に、includeで読み込まれる_head.ejsというファイルを作成します。
ejsディレクトリ内にcommonディレクトリを作成し、その中に_head.ejsファイルを作成します。
ファイル内は以下のように記述します。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title><%= metaTitle %></title> </head>
_head.ejsファイルにはheadの情報を記述しています。
タイトル部分にある<%= ～ %>は先ほどの<% ～ %>とは少し違い、～の値をその場に出力します。
今回の場合、読み込み元のmetaTitle(‘タイトルA’)が表示されるようになります。
<%= ～ %>ではHTMLタグなどが含まれる場合はエスケープ処理されます。
エスケープ処理したくない場合には<%- ～ %>を使用します。
これで一通り作成完了なので、コマンド プロンプトで
gulp ejs
と入力して変換します。
作業ディレクトリ内にindex.htmlが出力されれば成功です。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>タイトルA</title> </head> <body> <p>テスト</p> </body> </html>
【参考サイト】
- JavaScript – gulpで手軽にEJSテンプレートをHTMLに変換 – Qiita
- テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG
- EJSテンプレートエンジンを使おう！(1/5):ビギナーのための Node.jsプログラミング入門
- EJS – JavaScript Templates
コメントが承認されるまで時間がかかります。