gulp-ejsの設定。
作業ディレクトリ
- src/（開発環境）
-- assets/
--- sass/
--- img/
--- css/
--- js/
-- ejs/（テンプレートフォルダ）
--- util/（テンプレート関数）
--- parts/（ヘッダー等）
- dist/（本番環境）
-- assets/
--- img/
--- css/
--- js/
package.json
gulpfile.js
ejsの中身
● index.ejs
<%
var option = {
subtitle: "ああああはあああ",
description: "index",
}
%>
<%- include('parts/_head',{absPath:filename , option:option }) %>
<body>
<main>
ddddd
</main>
<%- include('parts/_footer',{absPath:filename , option:option }) %>
</body>
</html>
● parts/header.ejs
<%- include('../util/_filepath',{absPath:filename}) %>
<%- include('../util/_description') %>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="">
<meta name="description" content="<%= description(option) %>">
<link rel="stylesheet" href="<%= pathSet(absPath) %>assets/css/style.css">
<title>サイトタイトル<%= subtitle(option) %></title>
</head>
<header>
<nav>
<ul>
<li>
<a href="<%= pathSet(absPath) %>">Home</a>
</li>
<li>
<a href="<%= pathSet(absPath) %>about">About</a>
</li>
</ul>
</nav>
</header>
● parts/footer.ejs
<footer class="footer"> ふったー </footer>
● util/_description.ejs
<%
description = function(option){
if( !option.description){
return 'デフォルトテキスト';
}else{
return option.description;
}
};
subtitle = function(option){
if( !option.subtitle){
return ' | のんびり日記';
}else{
return ' | '+option.subtitle;
}
};
%>
● util/_filepath.ejs
<%
pathSet = function(absPath){
var rootPath = absPath.split('src/ejs')[1];
if(rootPath.split('/').length - 2 > 0){
return '../'.repeat(rootPath.split('/').length - 2);
}else{
return '';
}
};
%>
動かすのに必要な要素
gulp-data
gulp-ejs
基本のテンプレートにオプションの値をつけタイトル名の追加やディスクリプションの上書きをさせている感じ。
実務ではまだ使っていない草案の状態なのでもっと変わるかもしれない。
実際の案件によっても構造も違うしね。
jsonファイルを使ってテンプレートのディレクトリとファイル名からディスクリプションの設定をしようとも考えたけど
学習コストが高そうなのでとりあえず実務で一度ためしてから問題点を出してみる。