概要
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ファイルを設置し、
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のファイル作成が終わったよ
あとは個別の処理をここに書いていけば良さそうですね!