Doesn't play nice when watching a jekyll _site/ folder.

[KingScooty]

I was trying to pair this and browsersync with a jekyll watch task.

• Jekyll would compile the templates
• Browsersync would watch for changes in the compiled /_site folder
• html-injector would inject the new changes in the browser

The changes do get injected, but then the entire page refreshes about half a second afterwards.

This is my browsersync config (i'm using load-grunt-config to split the Gruntfile up):

module.exports = {
  dev: {
    bsFiles: {
      src : [
        './_site/assets/css/*.css'
      ]
    },
    options: {
      watchTask: true,
      server: './_site',
      plugins: [
        {
          module: "bs-html-injector",
          options: {
            files: "./_site/**/*.html"
          }
        }
      ]
    }
  }
}

[shakyShane]

^ it's because the jekyl watch task is creating to many file-changed events

[LA1CH3]

I'm seeing this same issue with an angular application, watching the view partials. I'm using the plugin in Gulp as follows:

gulp.task('serve', ['sass', 'scripts'],() => {
  bsServer.use(htmlInjector, {
    files: './atlas_ui/app/**/*.html'
  });
  bsServer.init({
    server: {
      baseDir: './atlas_ui/app'
    },
    files: ['./atlas_ui/app.atlas.css',
            './atlas_ui/app/scripts.js']
  });
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.styles, ['sass']);
});

The injection occurs but there is still a reload happening.

[ghost]

+1, with Mustache templates, using Patternlab. If I edit generated files directly, HTML is injected, if HTML generation occurs, I get an injection and an immediate refresh. Even if I make only one small change to the template. My Gulp setup:

    browserSync.init({
        server: {
            baseDir: config.paths.dest.root
        },
        plugins: [
            {
                module: "bs-html-injector",
                options: {
                    files:[config.paths.dest.patterns + '/**/*.html']
                }
            }
        ]
    });

    gulp.watch(config.paths.src.patterns + '/**/*.{mustache,json}', ['patternlab']);

[bmuenzenmeyer]

FWIW: Pattern Lab writes a ton of files on generation - similar to Jekyll. This could be improved to attempt to only write changed files but it's not on my roadmap right now

[ghost]

So the page refresh is triggered because more HTML is updated than Browsersync can 'handle', by some threshold value or something? The actual difference to a modified generated file is very small, but does Browsersync still see that all HTML was rewritten?

[darwin]

I started using browser-sync in proxy mode pointed at my local nginx which acts as a reverse proxy for multiple dev servers powered by jekyll serve (I have multiple subdomains).

To make html-injector work I had to do two things:

1. silence Jekyll's busy output with this little hack
2. persuade html-injector to actually wait for changes to propagate to nginx

For some reason html-injector was too fast in my case. When it gets file:change event it immediately requests the page from server. But there was a delay between filesystem activity and new content available at nginx. I suspect this is Jekyll's fault not really nginx's.

Anyways, this worked for me. And adding a plugin option for setting delay could be something worth considering.

https://github.com/binaryage/site/commit/33291b57596f89d5e50a111f07f8f305d0ecdc28 https://github.com/darwin/html-injector/commit/8704a341ce4b789bbd19da3b64b44cc26d612bd2