Kirby's css/js helpers & Browsersync

Kirby 2 Solved ✅
1

Hello,

I have a site running on localhost (with Docker), and I use Browsersync to automatically refresh and inject pages upon save.
This works fine for php files and normal link/script tags, but Browsersync does not inject changes made to css and js files if they are applied with Kirby’s helper functions. Notice that, the files are updated inside Kirby’s folders, but are not injected on the browser.

The Browsersync command in my npm scripts file is:
"serve": "browser-sync start --proxy localhost --files public --no-notify"

Maybe the problem is that helpers create urls that Browsersync is not watching, like the <link href="//localhost:3000/assets/main.css"> I am getting, vs the <link href="assets/main.css"> I used if I hand-coded the <link>.

Any ideas?

2

I have no problem using live reloading so far.
As far as I can see you just set public for the --files config.
In my case I added all files that should be watched.

const config = {
  files: [
    'public\\**\\*.php',
    'public\\assets\\scripts\\**\\*.js',
    'public\\assets\\styles\\**\\*.css',
    'public\\assets\\images\\**\\*',
    'public\\assets\\fonts\\**\\*.{eot,svg,ttf,woff,woff2}'
  ]
}

This works for me. But not really sure how to do this as a npm script.

3

Works fine for me with the helpers, and I use NPM scripts too. Heres my setup if it helps.

I use a simplified version these days, that uses Larval Mix.

With that, my files block looks like this:

mix.browserSync({
  proxy: 'example.dev',
  files: [
    "public/assets/js/**/*.js",
    "public/assets/css/**/*.css",
    "public/site/templates/*.php",
    "public/site/snippets/**/*.php",
    "public/content/**/*.txt"
  ]
})
4

Thanks for helping! The problem was the cachebuster plugin I had in use. I will need a separate config for development and production I guess.

5

Oh yeah… i got that too! totally forgot, and i solved it multiple Kirby configs.