ejsのテンプレート

投稿日：2018年2月3日更新日：2018年4月30日

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。

で、生のHTML/CSSの本を読んでいてejsなるテンプレートエンジンを発見。どうやらnode.jsのテンプレートのようですね。

まあHTMLで中でPHP使えればいいんですけどhtaccessの設定とかが面倒だったり、中にはできないケースもあるかと思いこれを機に勉強してみました。

Contents

1 インストール
2 ディレクトリ構成
3 GitHub

インストール

nodeとnpmが入っていることが前提となります。

npm install gulp-ejs -D

1	npm install gulp-ejs -D

ディレクトリ構成

├── build
│   ├── assets
│   │   ├── css
│   │   ├── img
│   │   └── js
│   └── index.html
└── src
    ├── assets
    │   ├── css
    │   ├── ejs
    │   └── img
    └── ejs
        ├── common
        │   ├── _footer.ejs
        │   └── _header.ejs
        └── index.ejs

├── build

│ ├── assets

│ │ ├── css

│ │ ├── img

│ │ └── js

│ └── index.html

└── src

├── assets

│ ├── css

│ ├── ejs

│ └── img

└── ejs

├── common

│ ├── _footer.ejs

│ └── _header.ejs

└── index.ejs

_header.ejs

<header class="header">
	<h1 class="header__logo"></h1>
	<nav class="header__gmenu">
		<ul>
			<li class="header__gmenu_list"><a href="">HOME</a></li>
			<li class="header__gmenu_list"><a href="">Service</a></li>
			<li class="header__gmenu_list"><a href="">Works</a></li>
			<li class="header__gmenu_list"><a href="">Contact</a></li>
			<li class="header__gmenu_list"><a href="">Employment</a></li>
		</ul>
	</nav>
</header>

<ul>

<li class="header__gmenu_list"><a href="">Service</a></li>

<li class="header__gmenu_list"><a href="">Works</a></li>

<li class="header__gmenu_list"><a href="">Contact</a></li>

<li class="header__gmenu_list"><a href="">Employment</a></li>

</ul>

</nav>

</header>

_footer.ejs

<footer>
	<nav>
		<ul>
			<li><a href="">HOME</a></li>
			<li><a href="">Service</a></li>
			<li><a href="">Works</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">Employment</a></li>
		</ul>
	</nav>
</footer>

<nav>

<ul>

<li><a href="">Service</a></li>

<li><a href="">Works</a></li>

<li><a href="">Contact</a></li>

<li><a href="">Employment</a></li>

</ul>

</nav>

</footer>

index.ejs

<%-include('common/_header')%>
<section id="test">
	test
</section>
<%-include('common/_footer')%>

<%-include('common/_header')%>

test

</section>

<%-include('common/_footer')%>

タスクランナー(gulpfile.js)

gulp.task('ejs', function(){
  gulp.src('ejssample/src/ejs/index.ejs')
    .pipe(ejs()) // 拡張子の指定
	.pipe(rename({extname:'.html'}))
    .pipe(gulp.dest('ejssample/build/'));
});

gulp.task('ejs', function(){

gulp.src('ejssample/src/ejs/index.ejs')

.pipe(ejs()) // 拡張子の指定

.pipe(rename({extname:'.html'}))

.pipe(gulp.dest('ejssample/build/'));

});

GitHub

https://github.com/umanari145

参考リンク

EJSを使ってスクリプトなどをヒアドキュメントっぽくextends する

EJSとJSONファイルを使って大量のデータを一括管理してHTMLに書き出す