サーバ側でプログラムが動かないサーバを指定されている案件の時、ページ数が増えると正直面倒臭いですよね。

しかも、よりによってナビゲーションの変更とか言われてしまうと、「ページによって違うコードになってないよなあ・・・」なんて一括置換をドキドキしながらやることになるわけです。

そんな時には最近使っているgulpさんに大活躍してもらいましょう。

gulpさんにejsを動かしてもらうことによって、静的なHTMLでもパーツの共通化できたり、ループが使えるようになったり、細分化することによって全体のソースコードの見通しを良くするなど、便利にコーディングをすることができますよ！

 

導入方法

まずはgulp本体が入っていて、gulpを使ってサイトを作っている前提で話を進めてしまいます。


sudo npm install gulp-ejs --save-dev

なにはともあれ、こいつをターミナルで打ち込み、環境を作ります。

gulpfile.jsに、こいつを動かすためのコードを追加しましょう。

 

サンプルでは、

/ – gulpfile.jsとか

/htdocs – 公開したいサイトのドキュメントルート

/ejs – この中にejsファイルを作っていきます！

といった構成にしています。

 


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

gulp.task('ejs', function (){
 gulp.src(["./htdocs/ejs/*.ejs", "!./htdocs/ejs/_*.ejs"])
 .pipe(plumber())
 .pipe(ejs())
 .pipe(gulp.dest('./htdocs/'));
});

これを追加します。
gulp−plumberを入れておかないと動かないですが、エラーを出さない自信のある人はいらないのかな・・・。

そしてwatchタスクに、ejsを追加


gulp.task("default", ["server"], function() {
gulp.watch("./htdocs/ejs/*.ejs",["ejs"]);
gulp.watch("./htdocs/sass/**/*.scss",["sass"]);
gulp.watch("./htdocs/sass/**/*.sass",["sass"]);
gulp.watch("./htdocs/**/*.html",["html"]);
});

これは今使っているサイトから引っ張ってきただけの例（ライブリロードやらsassが動いている・・・）なので、適宜書き換えてください。

 

というわけで動かしてみる

なんとなくのサンプルなのですごく適当に。


<html>
<header>
<title><%= title %></title>
</header>
<body>
<div id="header">ヘッダですよ</div>



<div id="footer">フッタですよ</div>
</body>
</html>



<% var title = "ページのタイトルとか入れればいいと思う。" %>
<% include _header %>
<% include _footer %>

これでgulpのタスクを走らせるだけ。
アンダーバーからはじまるファイルは書き出さないようにしているので、ゴミファイルも増えないかな？と思っています。

ちなみに、静的ファイルのジェネレーター、テンプレートエンジン的なものは、今回の記事でご紹介したnode.jsのgulpだけではなく、RubyならJekyll、Middlemanなどのメジャーなツールが、その他Pytonなどでもこういったツールは存在しているので、活用していきたいですね！