EJSでサイトの共通部分を静的にジェネレートする

ツール

以前にも共通部分の作り方を色々紹介したのですが、今回はEJSでの作成方法を紹介します。

以前紹介したのは以下の記事です。

EJSを使う方法

EJSとは

EJSとは「Embedded JavaScript templating」の略で、JavaScriptを使用してHTMLマークアップを生成できるテンプレート言語とのことです。

EJS -- Embedded JavaScript templates
'E' is for 'effective'. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize thi...

gulpをインストール

EJSを使うにはいくつか方法がありますが、今回はgulpを使ってEJSを実行しようと思います。gulpの導入手順は以下のページを参考に。

EJSに関するパッケージをインストール

gulpをインストールしたら、次にパッケージをインストールします。
パッケージは以下の2つ。

npm install --save-dev gulp-ejs//EJS
npm install --save-dev gulp-rename//ejsの拡張子をhtmlにする

念のためバージョンはこちら

"gulp-ejs": "^5.1.0",
"gulp-rename": "^2.0.0"

フォルダ構成

フォルダ構成はこのようにします。フォルダ構成によってはこの後のpackeage.jsonやgulpfileの記述方法のパス部分が変更になります。

dest(書き出し用ファイル)
src(開発用)---ejs
gulpfile.js
node_modules
package.json
package-lock.json

そして、gulpfile.jsは以下のように記述します。

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

//EJS(テンプレートエンジン)
gulp.task("ejs", function(done) {
    gulp.src(
       ["src/ejs/**/*.ejs",'!' + "src/ejs/**/_*.ejs"] //参照するディレクトリと出力を除外するファイル
    )
    .pipe(ejs())
    .pipe(rename({extname: ".html"})) //拡張子をhtmlに
    .pipe(gulp.dest("dest/")); //出力先

    done();
});

EJSの実行

ターミナルで「gulp ejs」を実行するとsrcで作成したファイルがdestフォルダに書き出されます。またgulpfile.jsで設定したように、src内でファイル名に(_)アンダーバーがついたファイルは書き出しされません。

EJSでのincludeの記述方法

EJSでのincludeは以下のように記述します。

<%- include ('common/_header'); %> //パスの部分は読み込みたいEJSファイルの位置で変更する

includeする際の.ejsの拡張子は省略可能のようです。

EJSファイルは普通にHTMLの記述が出来るので、include部分以外は普通のHTMLを記述することが出来ます。

というわけでEJSの基本的に使い方でした。
このままだと表示確認が大変だったり、せっかくビルドするならsassを使いたいなと思うのでそこらへんの設定方法も調べていこうと思います。

コメント

タイトルとURLをコピーしました