メモブログ

技術的なことを書き連ねるブログ

gulp(node)でjsonのデータを読み込む時、jsonファイルの修正が都度反映されない件

gulp(node)を使用時、jsonなどの外部ファイルにデータを持っておき、それを読み込んで処理をしたい時があると思います。

が、以下のように requireで読み込んだ場合、初期に読み込んだものがキャッシュされてしまいタスクを走らせた後に、jsonファイルを修正してもその変更が反映されません。なので、毎回タスクを起動、停止、起動みたいにしのいでました。

gulpfile.js その1

#pug
gulp.task 'pug', ()->
  gulp.src [
    paths.root + '/**/*.pug'
    "!"+ paths.root + '/**/_*.pug'
  ]
    .pipe plumber()
    .pipe data (file)->
        {
          'conf':require './src/data/config.json', 'utf8' 
          'conf':require './src/data/data.json', 'utf8' 
        }
    .pipe pug {pretty: true}
    .pipe gulp.dest(paths.dist)
    .pipe browser.reload({stream:true})


調べたら、同じことで悩んでいる人がいましたw
nodeにデフォルトでビルドインされている
「fs」モジュールを使用してfs.readFileSyncメソッドを使うようです!


gulpfile.js その2

fs   = require 'fs' # これ必要 デフォルトの機能なので npm installは不要です

#pug
gulp.task 'pug', ()->
  gulp.src [
    paths.root + '/**/*.pug'
    "!"+ paths.root + '/**/_*.pug'
  ]
    .pipe plumber()
    .pipe data (file)->
        {
          'conf':JSON.parse(fs.readFileSync('./src/data/config.json', 'utf8'))
          'data':JSON.parse(fs.readFileSync('./src/data/data.json', 'utf8'))
        }
    .pipe pug {pretty: true}
    .pipe gulp.dest(paths.dist)
    .pipe browser.reload({stream:true})

これで、リアルタイムに更新が反映されるようになりました!!

【参考サイト】
node.jsでjsonファイルを読み込む方法 - まーぽんって誰がつけたの?