0%

Programmingプログラミングナレッジ

Posted:2020.02.12

gulpでJavascriptのテンプレートエンジン「EJS」の開発環境を構築する

今回はJavascriptのテンプレートエンジンである「EJS」について、gulpを使った開発環境の構築フローをまとめていきたいと思います。このEJSですが、Javascript内でHTMLや処理などを記述したものを、HTMLファイルとしてコンパイルして利用するのですが、HTMLの中にテンプレートを呼び出すことや条件分岐などが可能になるので、静的ページを大量に制作する場合などにとても役立ちます。

 

似たようなものにpugなどもありますが、HTMLとの親和性やシンプルさに関しては、EJSの方が勝るのではないでしょうか。EJSはnode.js環境下で使えるので、使用の際にはnode.jsがインストールされている必要があります。node.jsのインストールについては過去記事「Node.jsのバージョン管理をnodebrewで行う」などで紹介しているのでご参考まで。今回はこのEJSを、タスクランナーであるgulpを使った方法で利用します。まずはgulpの環境を準備しておきます。gulpのインストールについては過去記事「Gulp v3系からGulp v4系への移行と注意点いろいろ」などをご参考ください。

 

以下はgulpがインストールされている前提での流れとなります。まずはnpmなどで必要なモジュールをインストールしていきます。ここで必要になるのは「gulp-ejs」と「gulp-rename」の2つです。gulp-ejsはEJSファイルをコンパイルする時などEJSメインの機能を備えているもので、gulp-renameはEJSファイルをHTMLファイルとして変換する際に必要となります。

$ npm install --save-dev gulp-ejs
$ npm install --save-dev gulp-rename

 

2つのモジュールがインストールされると、「package.json」に追記されているのが確認できます。

【package.json】※一部省略

......
"devDependencies": {
 ......
 "gulp-ejs": "^5.0.0",
 "gulp-rename": "^2.0.0",
 ......
}
......

 

モジュールがインストールできたら「gulpfile.js」にEJSのタスクを追加していきます。まずは「gulp-ejs」と「gulp-rename」を読み込みます。続けて、gulp.task()でEJSファイルのコンパイル処理を記述していきます。

【gulpfile.js】

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

gulp.task("ejs", function() {
 return gulp
 .src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"])
 .pipe(ejs())
 .pipe(rename({ extname: ".html" }))
 .pipe(gulp.dest("dist"));
});

// watchでEJSファイル更新を監視する場合
gulp.task("default", function(done) {
 gulp.watch("src/ejs/*.ejs", gulp.task("ejs"));
 done();
});

 

対象となるソースファイルの指定には該当するフォルダにあるファイルの拡張子を指定しますが、EJSのファイルは拡張子が「ejs」になるので、それを全て指定します。ただし、モジュールとしてインクルードする場合にはコンパイルしないので、アンダーバーから始まるejsの拡張子がついたものは除外するようにしておきます。

 

続けて、コンパイルの後はHTMLファイルとしてリネームし、出力先フォルダに生成されるように指定しておきます。watchでファイル更新を監視する場合には、EJSをコンパイルするタスクを引数に登録しておきます。これでタスクの登録は完了です。

 

上記は以下のフォルダ、ファイル構成を想定しています。ソースファイルであるEJSファイルがdistフォルダ配下にコンパイルされます。

node_modules
gulpfile.js
dist
src
  ┗ ejs
    ┗ test.ejs

 

実際に下記のコマンドでEJSファイルをコンパイルしてみます。

$ npx gulp ejs

 

すると、以下のようにEJSファイルが指定したフォルダ内へHTMLファイルに変換されて出力されたのが確認できました。

node_modules
gulpfile.js
dist
  ┗ sample.html
src
  ┗ ejs
    ┗ sample.ejs

 

テンプレートエンジンとしてはマイナーな印象がありますが、HTMLの延長で扱えることで導入コストは低く、シンプルなので手軽に始められるのがメリットですね。静的ページを大量に作成する場合などには威力を発揮するので、開発環境を整えておくと役に立つのではないでしょうか。具体的な使い方などはまた後日改めて記事にまとめていきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】