mattdesl/budo

--live for css only? (When using browserify-hmr)

Closed this issue · 4 comments

spacejack commented

I'm using browserify-hmr, so I can't use the --live flag. However I won't get CSS reloads this way.

My workaround to use the --live flag is to provide budo an empty JS script, then start a separate watchify script for browserify-hmr. Point budo at the directory to serve. This way I get HMR for code updates and budo does CSS updates. But I lose the benefit of using budo as my browserify/watchify command.

So this is what I'm using for now:

"watch": "watchify -v --debug src/index.ts -p [ browserify-hmr ] -p [ tsify --project src/tsconfig.json ] -o public/js/app.js",
"serve": "budo scripts/dummy.js -p 3000 --dir public --live",
"start": "npm-run-all -p watch serve"
mattdesl commented

The --live flag supports a file glob exactly for this purpose. 😄 The following will ignore reload events on your JS bundle:

budo scripts/dummy.js -p 3000 --dir public --live=*.{html,css}

You can also run your own dev.js script if you want more control over how LiveReload is set up. You can read more about LiveReload here:
https://github.com/mattdesl/budo/blob/master/docs/live-reload.md

spacejack commented

Ah, you're right! Sorry, I must have messed up somewhere I thought it was reloading the page.

Anyway, excellent dev tool! 👍

spacejack commented

Come to think of it, I may have misinterpreted the section on HMR where it says

Make sure you don't pass a --live flag to budo, otherwise it will trigger hard reloads on file save.

But I guess that applies to livereactload only.

mattdesl commented

I should probably update that to make this feature clearer. 😄

  • 👍1