meta情報の管理や商品・店舗情報などのページ量産など様々な用途で使用できるので便利です。

ディレクトリ構成

src
  ├── asstes
  │   ├── images
  │   ├── js
  │   └── inc
  │        ├── _header.ejs
  │        └── _footer.ejs
  ├── page
  │   └── index.ejs
  ├── index.ejs
  └── json
      └── common.json
gulpfile.js
// ※package.json,node_modulesなどのディレクトリ・ファイルは割愛

gulpfile.js

var gulp    = require("gulp"),
  ejs         = require("gulp-ejs"),
  rename      = require('gulp-rename'),
  fs          = require("fs"),
  browserSync = require('browser-sync'),
  reload      = browserSync.reload,
  plumber     = require("gulp-plumber"),
  changed     = require('gulp-changed'),
  watch       = require("gulp-watch"),
  runSequence = require('run-sequence'),
  SRC         = "src/",
  DIST        = "dist/"
require("es6-promise").polyfill();

gulp.task('ejs', function() {
  var json = JSON.parse(fs.readFileSync(SRC + 'json/common.json'));
  return gulp.src([SRC + '**/*.ejs','!' + SRC + '**/inc/_*.ejs'])
  .pipe(changed(SRC + '**/*.ejs'))
  .pipe(plumber())
  .pipe(ejs({json}))
  .pipe(rename({extname: '.html'}))
  .pipe(gulp.dest(DIST))
  .pipe(browserSync.reload({
    stream: true
  }));
});

gulp.task('json',function() {
  gulp.src(SRC + 'json/common.json')
  .pipe(changed(SRC + 'json/common.json'))
  .pipe(browserSync.reload({
    stream: true
  }));
});

gulp.task('watch', () => {
  watch([SRC + 'json/common.json'], function(event){
      gulp.start("json");
  });
  watch([SRC + '**/*.ejs'], function(event){
      gulp.start("ejs");
  });
});

gulp.task('browser-sync', () => {
    return browserSync.init(null, {
        server: DIST,
        reloadDelay: 100
    });
});

gulp.task('default', ['ejs', 'json','browser-sync', 'watch']);