Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

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

https://ja.nuxtjs.org/guide/modules/

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away