1

我的Nuxt项目使用隐藏.pages目录而不是原来的pages. .pages是从根目录和插件目录复制文件的结果，pages因此它是只读的。我配置gulp为.pages使用gulp.watch. 问题是在这种情况下热重载效果不好。为了解决这个问题，我尝试设置watch选项以更严格nuxt.config.js地观察。.pages它有帮助，但是每当我在pages目录中进行更改时，它只会重新编译整个应用程序，您可以想象它太长了。是否可以配置监视.pages目录中的更改，以便热重载将像往常一样正常工作，就像直接在目录中进行更改一样.pages？您可以在下面看到我的collect-pages脚本，该脚本从pages应用程序中的目录.pages以及gulpfile.js监视更改pages和collect-pages更改的目录。

// collectPages.js

const fse = require('fs-extra')
const path = require('path')
const { handleRegionPlugins } = require('../_utils')

const region = process.env.REGION

const sourceDir = path.resolve(__dirname, '../../../pages')
const distDir = path.resolve(__dirname, '../../../.pages')

fse.removeSync(distDir)
fse.copySync(sourceDir, distDir)

if (region) {
  /** Adding region plugins pages. */
  handleRegionPlugins(region, (pluginDir) => {
    const pluginSourceDir = `${pluginDir}/pages`
    if (fse.existsSync(pluginSourceDir)) {
      fse.copySync(pluginSourceDir, distDir)
    }
  })

  /** Adding region pages. */
  const regionSourceDir = path.resolve(
    __dirname,
    `../../../plugins/regions/${region}/pages`
  )
  if (fse.existsSync(regionSourceDir)) {
    fse.copySync(regionSourceDir, distDir)
  }
}



// gulpfile.js

const { exec } = require('child_process')
const path = require('path')
const { watch } = require('gulp')

const region = process.env.REGION

function collectPages(cb) {
  exec('npm run collect-pages')
  cb()
}

function defaultTask(cb) {
  /** Watching for changes in base pages. */
  watch(path.resolve(__dirname, '../../../pages/**/*'), collectPages)

  if (region) {
    /** Watching for changes in region plugins pages. */
    handleRegionPlugins(region, (pluginDir) => {
      watch(`${pluginDir}/pages/**/*`, collectPages)
    })

    /** Watching for changes in region pages. */
    watch(
      path.resolve(__dirname, `../../../plugins/regions/${region}/pages/**/*`),
      collectPages
    )
  }

  cb()
}
4

0 回答 0