GulpでJavascriptのテンプレートエンジンEJSの開発環境を構築する
最終更新日: Update!!
今回は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-rename2つのモジュールがインストールされると、「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ですが、EJSを使っていると想定しないスペースや空行が入る場合もあります。そんな場合にはGulpで用意されているHTMLの整形ツールのパッケージを導入することで対応できます。HTMLの整形ツールは色々ありますが、今回は「gulp-prettify」というものを使います。下記コマンドでパッケージをインストールしていきます。
$ npm install --save-dev gulp-prettifyインストールが完了したら、gulpfileに記述しているタスクを修正し、コンパイル時にHTMLの整形がされるように処理を加えていきます。インデントのサイズなども細かく指定できますので、コンパイル後のHTMLを編集する場合にもコードが見やすくて助かりますね。 【gulpfile.js】
const ejs = require("gulp-ejs"); const rename = require("gulp-rename"); const prettify = require('gulp-prettify'); gulp.task("ejs", function() { return gulp .src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"]) .pipe(ejs( {}, { rmWhitespace: true } )) .pipe(prettify({ indent_size: 2, indent_with_tabs: true })) .pipe(rename({ extname: ".html" })) .pipe(gulp.dest("dist")); });また、gulp-ejsのオプションでも余計なスペースを削除するオプションが用意されていますので、合わせて設定しておくといいですね。こちらはejs()の第二引数に指定します。
Gulpのバージョン4系で推奨されている記述方法について
Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】const { src, dest, watch } = require("gulp"), plumber = require('gulp-plumber'), notify = require('gulp-notify'), rename = require('gulp-rename'), prettify = require('gulp-prettify'), ejs = require('gulp-ejs'); const taskEjs = (done) => { src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"]) .pipe(plumber( { errorHandler: notify.onError('Error: <%= error.message %>') } )) .pipe(prettify({ indent_size: 2, indent_char: ' ', indent_with_tabs: false })) .pipe(rename( { extname: '.html' } )) .pipe(dest('dist')); done(); } // Watch const taskWatch = (done) => { watch('src/ejs/**/*.ejs', taskEjs); done(); } exports.default = taskWatch;テンプレートエンジンとしてはマイナーな印象がありますが、HTMLの延長で扱えることで導入コストは低く、シンプルなので手軽に始められるのがメリットですね。静的ページを大量に作成する場合などには威力を発揮するので、開発環境を整えておくと役に立つのではないでしょうか。具体的な使い方などはまた後日改めて記事にまとめていきたいと思います。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories