WEB制作(html・css(スタイルシート))に関する各種メモ書き

HTML生成に JavaScriptテンプレート「ejs」を使いSublime Textから自動でコンパイルするようにする

静的サイト作成時に「ヘッダ」「フッタ」「グローバルナビゲーション」等は共通部品として別ファイルで管理しておきたい事がよくあります。
そこでテンプレートエンジン ejs を使用します。(拡張子「.ejs」)
流れとしては
『ejsテンプレートを編集して保存』→『gulpが自動でコンパイル(全てのhtmlファイルを自動生成)』→『ブラウザでhtmlファイルを確認』 となるので、作業の手間としてはhtmlファイルを編集しているのとほとんど変わりません。

なお、node.js , gulp のインストールは割愛します。(あらかじめインストールしておいてください)

●1. ejs のインストール

HTML制作ディレクトリのトップからターミナルで

npm install --save-dev gulp-ejs@2.3.0
注意 : gulp-ejs はバージョン2系とバージョン3系で引数の渡し方が変わっています。
今回はバージョン2系を使用しています
なおバージョン確認コマンドは「npm info gulp-ejs」

●2. ejsをSublimeTextでコンパイル出来るようにビルドの設定をする。

gulp自身にファイルを監視させることもできますが、SublimeTextのビルドを使う方法を紹介します。
【ツール】→【ビルドシステム】→【ビルドシステム追加】で新規ファイルが開くので下記の項目を入力してファイル名 gulp.sublime-build で保存します。
保存するパスは /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/gulp.sublime-build です。
( Mac OSX での例 )

{
    "cmd": ["gulp ejs"],
    "shell": true,
    "working_dir": "$project_path" ,
		"osx": {
		    "path": "/usr/local/bin:{HOME}/.rbenv/shims:$HOME/.nodebrew/current/bin:$PATH"
		},
}

↑ SublimeTextにパスを渡しています

$HOME/.nodebrew/current/bin:

●3. ejsファイルを保存時に自動でコンパイルするように設定する

ファイル更新時に自動でコンパイルできるようにSublimeTextで設定します 【基本設定】→【Package Settings】→【SublimeOnSaveBuild】→【Settings - User】を選択してセッティングファイルを開く。
以下のコードをペーストして保存

{
    "filename_filter": "\\.(scss|sass|ejs|js|css|html)$",
    "build_on_save": 1
}

拡張子「scss」「sass」「ejs」「js」「css」「html」保存時に自動でビルドするよう設定します。(不要な拡張子は取り除くこと。)

●4. gulpの設定ファイル gulpfile.js の作成

HTML制作ディレクトリのトップにファイル gulpfile.js を下記の内容で作成します。

//
// ejs 設定
//
var gulp = require('gulp');
var ejs  = require("gulp-ejs");
gulp.task('ejs', function(){
  gulp.src(['./ejs/*.ejs', './ejs/*/*.ejs', '!./ejs/_*.ejs'])
    .pipe(ejs({}, {ext: '.html'}))
    .pipe(gulp.dest('./'));
});

●5. SublimeTextでのビルド

・ejsファイルのコンパイル

ejsファイルは 拡張子 .ejs としてディレクトリ ejs において、SublimeTextで開いて command + b でコンパイルします。
一度コンパイルすると後は保存のたびに自動でコンパイルされます。

●6. EJSテンプレートで別ファイルをインクルード

共通部分を切り分けて呼び出します。
その時にパスも渡しています。

・呼び出す元のファイル(例)

<%- include('../_html_head.ejs', {r_path:'..'}) %>

・呼び出される側のファイル(例)

<link rel="stylesheet" href="<%= r_path %>/js/script.js">
<link rel="stylesheet" href="<%= r_path %>/css/style.css">

でインクルード時にパラメーターを渡すことができます。

●6. EJSテンプレートファイル名を取得する

<%= filename %>

と記述するとフルパスでファイル名が帰ります

/Users/hogehoge/Desktop/test/ejs/index.ejs

ただし、インクルードされるファイルに記述してもインクルード元ファイルのパスが返ります。

下記のように使うと便利です

<% var flag = filename.split('/')[filename.split('/').length - 1].replace('.ejs','') %>
<%= flag %>

引用 : http://bit.ly/1Oz6EJX

ejsの使い方 : https://github.com/tj/ejs
EJS便利な構文 : http://bit.ly/1XiajOj
Gulp + EJS + JSONを使用してhtmlを量産 : http://bit.ly/1WZFQ8c

No.1032
04/26 10:32

edit