14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt.jsでgenerate時に特定の処理を実行する(hook)

Posted at

概要

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のファイル作成が終わったよ

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

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?