ejsを使ってみる

HTMLテンプレートエンジンである、pugは試したことがあったのですが、wordpressとそんなに相性がよくなく、魅力を感じていませんでした。
しかし、ejsはすごくPHPっぽい感じですのでちょっと調べてみようと思いました。

pugがwordpressと相性が悪いわけ

pugは性質上、閉じタグが必ずできてしまします。そうすると、閉じタグなしのパーツ切り分けをしたい場合にどうしたらいいかよくわかりません。
工夫すればうまくできるのかもしれませんが、工夫する意味を考えてしましますね・・・。

ejsはHTMLの書き方である

HTMLの書き方で、変数やincludeが使えるというイメージです。
なのですごくPHPっぽい書き方で構成できます。

難点

視認性がめちゃくちゃ悪い。
普通のタグっぽくてあんまり好きじゃないんだよな。
この辺はエディタで解決できるかもしれません。

HTMLやPHPを作る

基本的には、サーバー上で動かすのを想定しているようなので
静的なファイルの生成(HTMLやPHP)を作るにはgulpを使う必要がある。

ちなみにvs codeにこれを入れた

https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support

導入方法

node/npmはインストール済みとして進める。

sudo npm install --save-dev gulp-ejs gulp gulp-rename
mkdir src src/ejs src/scss dest
touch src/ejs/_header.ejs src/ejs/_footer.ejs src/ejs/index.ejs gulpfile.js

wordpress云々といってますが、とりあえずLPを構築してみたいと思います。

gulpfile.js

'use strict';
const gulp = require('gulp');
const fs = require('fs');
const rename = require('gulp-rename');
const ejs = require('gulp-ejs');

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

尻切れとんぼですが、src/ejs/　にindex.ejsファイルを入れて
gulp ejs　でコンパイルできます。