EJSとGulp.jsを使ってみる

テンプレートエンジンを使ったコーディングを試してみたかったので、今回は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>

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930