Как настроить горячую перезагрузку каталога, который изменяется путем переопределения его файлов? - PullRequest
Новая
       71

Как настроить горячую перезагрузку каталога, который изменяется путем переопределения его файлов?

1 голос
/ 27 сентября 2019

Мой 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()
}
...