meta情報の管理や商品・店舗情報などのページ量産など様々な用途で使用できるので便利です。
ディレクトリ構成
src ├── asstes │ ├── images │ ├── js │ └── inc │ ├── _header.ejs │ └── _footer.ejs ├── page │ └── index.ejs ├── index.ejs └── json └── common.jsongulpfile.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']);
