LiveReload problems when serving Hugo and webpack theme at same time

support
4

@rdwatters thanks again for the Victor Hugo link!

I ended up adapting some of what they did, but making modifications as well (the Victor Hugo kit doesn’t distinguish between content and theme, which is something I wanted to preserve).

It looks like the Victor template uses BrowserSync to handle the livereload functionality, and a gulp watch task runs a static rebuild of assets or content pages when necessary. I tried doing this but I found the BrowserSync server to be pretty slow.

I’m still using Gulp for this but I wanted to leverage Hugo and Webpack’s native watch abilities since they are both pretty fast (especially Hugo, which is kind of amazing here).

In case it’s helpful to anyone else, here’s an example of a simple gulp task that runs hugo and webpack --watch simultaneously:

// Abridged gulpfile.js in project root:
//
const fs = require('fs')
const gulp = require('gulp')
const spawn = require('child_process').spawn
const yaml = require('js-yaml')

const THEME_NAME = yaml.safeLoad(fs.readFileSync('./config.yml', 'utf8')).theme
const THEME_PATH = path.join(__dirname, 'themes', THEME_NAME)
const WEBPACK_BIN = './node_modules/.bin/webpack'

// Run hugo server and webpack --watch simultaneously, with merged output
gulp.task('dev', (cb) => {
  spawn(WEBPACK_BIN, ['--watch'], { cwd: THEME_PATH, stdio: 'inherit' }, (err) => {
    if (err) return cb(err)
    cb()
  })

  spawn('hugo', ['server'], { stdio: 'inherit' }, (err) => {
    if (err) return cb(err)
    cb()
  })
})