静的サイト作成時に「ヘッダ」「フッタ」「グローバルナビゲーション」等は共通部品として別ファイルで管理しておきたい事がよくあります。
そこでテンプレートエンジン ejs を使用します。(拡張子「.ejs」)
流れとしては
『ejsテンプレートを編集して保存』→『gulpが自動でコンパイル(全てのhtmlファイルを自動生成)』→『ブラウザでhtmlファイルを確認』
となります。
なお、node.js のインストールは割愛します。(あらかじめインストールしておいてください)
npm install -g gulp
HTML制作ディレクトリのトップからターミナルで
npm install --save-dev gulp-ejs@2.3.0
注意 : gulp-ejs はバージョン2系とバージョン3系で引数の渡し方が変わっています。
今回はバージョン2系を使用しています
なおバージョン確認コマンドは「npm info gulp-ejs」
gulp自身にファイルを監視させることもできますが、SublimeTextのビルドを使う方法を紹介します。
【ツール】→【ビルドシステム】→【ビルドシステム追加】で新規ファイルが開くので下記の項目を入力してファイル名 gulp.sublime-build で保存します。
保存するパスは
/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/gulp.sublime-build
です。
"selector" : ["source.ejs"] の項目は必ず配列で記述すること。
( Mac OSX での例 )
{
"cmd": ["gulp ejs"],
"selector" : ["source.ejs"],
"shell": true,
"working_dir": "$project_path" ,
"osx": {
"path": "/usr/local/bin:$HOME/.anyenv/envs/ndenv/shims:$HOME/.nodebrew/current/bin:$PATH"
},
}
↑ SublimeTextにパスを渡しています
$HOME/.nodebrew/current/bin: // nodebrew用
$HOME/.anyenv/envs/ndenv/shims // ndenv用
ファイル更新時に自動でコンパイルできるようにSublimeTextで設定します
【基本設定】→【Package Settings】→【SublimeOnSaveBuild】→【Settings - User】を選択してセッティングファイルを開く。
以下のコードをペーストして保存
{
"filename_filter": "\\.(scss|sass|ejs|js|css|html)$",
"build_on_save": 1
}
拡張子「scss」「sass」「ejs」「js」「css」「html」保存時に自動でビルドするよう設定します。(不要な拡張子は取り除くこと。)
HTML制作ディレクトリのトップにファイル gulpfile.js
を下記の内容で作成します。
const gulp = require('gulp');
const changed = require('gulp-changed');
const sftp = require('gulp-sftp');
const fs = require('fs');
const debug = require('gulp-debug');
const ejs = require('gulp-ejs');
const gulp_data = require('gulp-data');
const rename = require( 'gulp-rename' );
var load_json = function(filename) {
return JSON.parse(fs.readFileSync(filename, 'utf8'));
};
const paths = {
// root: './src',
ejs: {
src: './ejs/**/*.ejs',
dest: './www/',
},
};
// ========== ejs ==========
gulp.task('ejs', function() {
return gulp.src(['./ejs/*.ejs', './ejs/*/*.ejs', '!./ejs/_*.ejs'])
.pipe(changed(paths.ejs.dest))
// .pipe(debug())
.pipe(gulp_data(function(file) {
return {
'filename': file.path
}
}))
.pipe(ejs({}))
.pipe(rename({
extname: '.html'
}))
.pipe(gulp.dest(paths.ejs.dest));
});
ejsファイルは 拡張子 .ejs としてディレクトリ ejs において、SublimeTextで開いて command + b でコンパイルします。
一度コンパイルすると後は保存のたびに自動でコンパイルされます。
共通部分を切り分けて呼び出します。
その時にパスも渡しています。
<%- include('../_html_head.ejs', {r_path:'..'}) %>
<link rel="stylesheet" href="<%= r_path %>/js/script.js">
<link rel="stylesheet" href="<%= r_path %>/css/style.css">
でインクルード時にパラメーターを渡すことができます。
<%= filename %>
と記述するとフルパスでファイル名が帰ります
/Users/hogehoge/Desktop/test/ejs/index.ejs
ただし、インクルードされるファイルに記述してもインクルード元ファイルのパスが返ります。
下記のように使うと便利です
<% var flag = filename.split('/')[filename.split('/').length - 1].replace('.ejs','') %>
<%= flag %>
コメントは
<% /* ここはコメントです */ %>
と入力します
ejsの使い方 : https://github.com/tj/ejs
EJS便利な構文 : http://bit.ly/1XiajOj
Gulp + EJS + JSONを使用してhtmlを量産 : http://bit.ly/1WZFQ8c