ejs
gulp

EJSでルートへのパス(相対、絶対)を取得して変数化する

More than 1 year has passed since last update.

EJSではインクルードするパスを相対パスで指定する必要があります。ソーシャルボタンの設定で絶対パスが必要なこともあります。

パスを変数化する場合、ディレクトリごとに手書きでフォーマットを作って使い回していたんですが、ミスの原因になりますし、自動化したいところです。

開発環境はMac、gulp-ejs 2.1.1で確認しています。


filenameからパスを取得する

EJSでは<%= filename %>のようにするとMacの場合はUsers/からはじまるパスを取得できます。例えば開発用ディレクトリのルートにあるindex.ejsでは以下のようにパスを取得できます。

/Users/ユーザー名/Documents/開発環境のルート/開発用のフォルダ名/index.ejs


gulpfileの設定

Gulpを使ってEJSをコンパイルさせているので、以下のように記述しています。

var develop = {

'ejs': ['develop/**/*.ejs', '!' + 'develop/**/_*.ejs'],
'data': 'develop/assets/data/'
}

var release = {
'html': 'release/'
}

var fs = require('fs');
gulp.task('ejs', function() {
return gulp.src(develop.ejs)
.pipe(ejs({
site: JSON.parse(fs.readFileSync(develop.data + 'site.json'))
},
{ext: '.html'}
))
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(gulp.dest(release.html))
.pipe(browserSync.reload({stream: true}));
});

site.jsonには以下のように開発用のディレクトリ名を記述しておきます。

{

"developDir": "develop/"
}

これでどのEJSファイルからでもsite.developDir"develop/"と出力されるようになります。


index.ejsの設定

filenamesite.developDirをあわせてパスを取得します。

<%

var absolutePath = filename.split(site.developDir)[filename.split(site.developDir).length -1].replace('.ejs','.html');
var relativePath = '../'.repeat([absolutePath.split('/').length -1]);
-%>

ルートディレクトリのindex.ejsファイルで出力すると、

absolutePath // => index.html

relativePath // =>

のようになり、page/index.ejsで出力すると、

absolutePath // => page/index.html

relativePath // => ../

のように出力されます。絶対パスとルートパスの場合はhttp://example.com//を付け足して使用します。

"http://example.com/<%= absolutePath %>" // => "http://example.com/index.html"

"/<%= absolutePath %>" // => "/index.html"

インクルードするejsファイルにはinclude()の第二引数で変数を渡してあげればOKです。

<%

var absolutePath = filename.split(site.developDir)[filename.split(site.developDir).length -1].replace('.ejs','.html');
var relativePath = '../'.repeat([absolutePath.split('/').length -1]);
var pageData = {
absolutePath: absolutePath,
relativePath: relativePath
};
-%>
<%- include(pageData.relativePath + '_partials/_head.ejs', {page: pageData}); %>