sitateru tech blog: テンプレート

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル テンプレート の投稿を表示しています。 すべての投稿を表示
ラベル テンプレート の投稿を表示しています。 すべての投稿を表示

2019年1月24日木曜日

Gulp+EJSでページを量産

1月 24, 2019

こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。

複数の静的ページを作る際に便利なGulp+EJSについて紹介します。

今回やりたかったこと

  • 静的なページを量産
  • 共通パーツはテンプレート化したい

導入方法はNode.jsがインストールされている環境でプラグインをインストールします。

$ npm install gulp gulp-merge-json gulp-ejs gulp-rename fs

ディレクトリ構成

gulpfile.js

// gulpプラグインの読み込み
var gulp = require('gulp');
var merge = require('gulp-merge-json');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');
var fs = require('fs');

//jsonファイルの結合 ※複数のjsonファイルがなければ不要
gulp.task('json', function () {
  gulp.src('./app/data/origin/**/*.json')
    .pipe(merge({
        fileName: 'pages.json'
    }))
    .pipe(gulp.dest('./app/data'));
});

//設定ファイルの読み込み
const jsonData = './app/data/pages.json';
const json = JSON.parse(fs.readFileSync(jsonData));

// ejsをhtmlへ変換
gulp.task("ejs", function() {
    for (var key in json.pages) {
        var data = json.pages[key];
        data.path = key;
        var layout = data.layout;
        gulp.src("./app/ejs/" + layout + ".ejs")
            .pipe(ejs(data))
            .pipe(rename(key + '.html'))
            .pipe(gulp.dest('./public'));
    }
});

pages.json

{
    "pages": {
        "index": { //出力するhtmlファイル名
            "layout": "index", //使用するejsファイル名
            "title": "タイトル1"
        },
        "hoge/index": {
            "layout": "index",
            "title": "タイトル2"
        }
    }
}

index.json

<% include common/_head %> //includeするejs ファイルを指定
<%= title %> //jsonファイル内でしている要素が入る

実行方法

$ gulp json //jsonファイルの結合が必要な場合
$ gulp ejs

まとめ

ejsではjavascriptが使用できるためループ処理なども可能です。

あまり利用する場面は多くないですが、エンジニアさんに 依頼するほどでもないけど、ぱぱっと複数ページを作る必要があるときに便利です!