DOTLOG

gulpを使ってpugファイルにJSONの値をうまいこと入れ込む

どうもタニです。

前回の記事では、Javascriptテンプレートエンジン「mustache.js」を使って簡単に値を入れられるようにしました。
HTMLファイルを直接いじるのであれば特に問題ないのですが、普段は基本的にgulpを使って作業しています。

なので、今回は、gulp実行時にJSONの値を入れ込めるようにしました。HTMLのみですが、CSSやJSにも利用できると思うのでぜひ活用してみてください。

実装方法

開発環境は以下となります。

  • Mac 10.13.2
  • gulp 3.9.1

では早速手順を紹介します!

必要なモジュールをインストール

  • gulp-data
  • jsonfile
npm install -D gulp-data jsonfile

gulpfile.jsに以下を追加

var data = require('gulp-data');
var jsonfile = require('jsonfile');

// watch関数に入れる
// jsonという値を渡す
.pipe(data(function (file) {
  dir = './_test.json';
  return json = jsonfile.readFileSync(dir);
}))

JSONファイルにはダミーを入れておきます。

{
  "a": {
    "name": "タニ",
    "age": 26
  },
  "b": {
    "name": "ジャック",
    "age": 50
  }
}

pugファイルは下記のように作成

each val, index in json
  p= index + ': name:' + val.name + ' age: ' + val.age

gulpを実行

出力結果は以下になります。

<p>a: name:タニ age: 26</p>
<p>b: name:ジャック age: 50</p>

まとめ

いろいろ調べてるとfsモジュールを使ってJSONファイルを読み込んでる例がかなり多かった印象です。
ただ今回は、jsonfileというモジュールを見つけ、便利なものは使おうという主義なので使って実装してみました。
データをスプレッドシートからJSONに変換→変換したJSONをもとに量産する といったことも可能になると思います。楽できそうですね。

googleスプレッドシートからJSONに変換する方法は別途記事に書きます!

COMMENTS

About Me

プロフィール画像

タニユウキと申します。27歳の道産子です。犬、ゲーム、お酒、食べること、旅行大好きです。飲み友募集中です。

元フリーランス。現在は、札幌のWeb制作会社にフロントエンドエンジニアとして勤務してます。

当サイトでは、Web制作全般(バックエンドも)、フリーランスなどいろいろなノウハウだったり知識だったりを書いてます。

お問い合わせはこちら

Latest Posts

Popular Posts

TOP