静的なHTMLをそこそこ制作する案件があったので EJSを試しに使ってみました。 複数ページの情報をJSONで管理し、 テンプレートエンジン“EJS”でHTMLを書き出してみます。 こちらのページを参考にさせていただきました。 Gulp+EJS+JSONからHTMLファイルを生成する ▼環境
レイアウトが同じで「タイトル」と「メイン画像」が違うHTMLを量産するために使いました。 あまり理解できてないので、理解を深めるためにまとめようと思います。 ながれ ページ生成用JSONファイル(pages.json)をつくる テンプレート用EJSファイル(template.ejs)をつくる EJSの設定をgulpfile.jsに追記する gulpタスクを起動 構想 フォルダ構成 ↓こんなかんじで作ろうと思います。 src ├── __gulpfile.js__ │ ├── json │ └── __pages.json__ └── ejs └── __template.ejs__ dist └── __ejs生成HTML出力先__ JSONデータ 下記3つのデータJSONで管理しようと思います。 出力ファイル名(page) タイトル(title) 画像ファイル名(imageSrc)
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く