静的サイト作成時に「ヘッダ」「フッタ」「グローバルナビゲーション」等は共通部品として別ファイルで管理しておきたい事がよくあります。
そこでテンプレートエンジン ejs を使用します。（拡張子「.ejs」）
流れとしては
『ejsテンプレートを編集して保存』→『gulpが自動でコンパイル（全てのhtmlファイルを自動生成）』→『ブラウザでhtmlファイルを確認』 となります。
なお、node.js のインストールは割愛します。（あらかじめインストールしておいてください）

● gulp のインストール

npm install -g 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

です。

"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用

●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 を下記の内容で作成します。

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));
});

●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

●6. EJSテンプレートでコメントを入力する

コメントは

<% /* ここはコメントです */ %>

と入力します

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