Nuxt.jsでgenerate時に特定の処理を実行する（hook） #Nuxt

概要

Nuxt.jsで、nuxt generate の途中にアプリケーション固有の処理を差し込みたい。

公式ドキュメントを見ると、hookの概念があることがわかった。

特定のフックでタスクを実行する

単に Nuxt の初期化処理時だけではなく、特定の条件下でのみ、モジュールにある処理を実行させたいこともあるでしょう。特定のイベント時にタスクを行うため、パワフルな Tapable プラグインシステムを使うことができます。フックが Promise を返すか async として定義されている場合は Nuxt は待機します。

generate時に呼ばれているhook

pages/index.vue を作成した状態で nuxt generate するとログ後半に以下のようにhookの呼び出しログが出る。
hooks (1) となっているのはそのタイミングで呼ばれたhook数の模様。

  nuxt: Call generate:distRemoved hooks (1) +0ms
  nuxt:generate Destination folder cleaned +34s
  nuxt: Call generate:distCopied hooks (1) +141ms
  nuxt:generate Static & build files copied +140ms
  nuxt:render Rendering url / +0ms
  nuxt: Call generate:page hooks (1) +3s
  nuxt: Call generate:page hooks (1) +18ms
  nuxt:generate Generate file: /index.html +3s
  nuxt:render Rendering url / +86ms
  nuxt: Call generate:done hooks (1) +3ms
  nuxt:generate HTML Files generated in 37.4s +3ms
  nuxt:generate Generate done +0ms
✨  Done in 40.45s.

他にもありそうなので、generateのscriptを見に行くと
https://github.com/nuxt/nuxt.js/blob/0ca99426c93e4f5b7579c12675efb4f8fbef3f8b/lib/builder/generator.js

現時点では8個のhookが呼び出されている。

hook	comment
generate:before	Call before hook
generate:extendRoutes	extendRoutes hook
generate:distRemoved
generate:distCopied
generate:routeFailed
generate:page	Call hook to let user update the path & html
generate:routeCreated	Make sure the sub folders are created
generate:done	Done hook

探した限りhook一覧のようなものはなかったので、
scriptを見てhookが呼びされるタイミングを把握するのが現時点では一番確実そう。

hookを設定してみる

今回は dist に各pageのファイルが作られたタイミングで処理を差し込みたいと思っていたので、
generate:routeCreated のhookを試してみる。

moduleファイルを設置し、

modules/hook/generate.js

module.exports = function () {
  this.nuxt.hook('generate:routeCreated', async generator => {
    console.log('pageのファイル作成が終わったよ')
  })
}

nuxt.config.js にモジュール設定を追加。

  modules: [
    '@/modules/hook/generate'
  ]

この状態で nuxt generate すると…

  nuxt: Call generate:distRemoved hooks (1) +0ms
  nuxt:generate Destination folder cleaned +31s
  nuxt: Call generate:distCopied hooks (1) +20ms
  nuxt:generate Static & build files copied +19ms
  nuxt:render Rendering url / +0ms
  nuxt: Call generate:page hooks (1) +261ms
  nuxt:generate Generate file: /index.html +261ms
  nuxt: Call generate:routeCreated hooks (1) +1ms
pageのファイル作成が終わったよ
  nuxt:render Rendering url / +80ms
  nuxt: Call generate:done hooks (1) +1ms
  nuxt:generate HTML Files generated in 31.7s +2ms
  nuxt:generate Generate done +0ms
✨  Done in 34.32s.

ちゃんと出力されてました。

  nuxt: Call generate:routeCreated hooks (1) +1ms
pageのファイル作成が終わったよ

あとは個別の処理をここに書いていけば良さそうですね！