CSS refresh then reload #165

Closed
brendon opened this Issue Jul 7, 2016 · 6 comments

Projects

None yet

2 participants

@brendon
brendon commented Jul 7, 2016

I'm having a bit of a problem when saving css files. The file quickly gets reloaded in the browser, then a second of so later, the whole browser refreshes.

I like the css update, and would happily keep that without the subsequent reload.

This is my current rule:

guard 'livereload' do
    extensions = [:css, :js, :html, :png, :gif, :jpg, :jpeg]
    watch(%r{templates/.+\.(#{extensions * '|'})})
end

I've found apply_css_live: false and that means that the page just refreshes which is fine, but I kind of like the speed of the live css application too :) Perhaps I can have two rules, one for css that doesn't trigger a full refresh, and one for the rest?

@e2
Contributor
e2 commented Jul 29, 2016

I think you can handle that with 2 rules:

guard 'livereload', {apply_css_live: true} do
    extensions = [:css, :js, :html, :png, :gif, :jpg, :jpeg]
    watch(%r{templates/.+\.(#{extensions * '|'})})
end

guard 'livereload', {apply_css_live: false} do
    extensions = [:js, :html, :png, :gif, :jpg, :jpeg]
    watch(%r{templates/.+\.(#{extensions * '|'})})
end

Does this help?

@brendon
brendon commented Aug 1, 2016 edited

Thanks @e2, I tried that but it didn't work as expected. I then noticed that the regex was too permissive and was detecting a change to files like main.css.map. I put an end-of-string constraint into the regex and it works like a charm now with just the one rule:

guard 'livereload', apply_css_live: true do
    extensions = [:css, :js, :html, :png, :gif, :jpg, :jpeg]
    watch(%r{templates/.+\.(#{extensions * '|'})\z})
end

Feel free to close this if unless there's something you'd like to add :)

@e2 e2 added a commit that referenced this issue Aug 1, 2016
@e2 e2 ignore css.map files [fix: #165] 37ce562
@e2
Contributor
e2 commented Aug 1, 2016

Thanks! I added a test, fixed the template and merged to master.

@e2 e2 closed this Aug 1, 2016
@brendon
brendon commented Aug 1, 2016

You're welcome :) Glad to be of some help. I assume the \z is the better approach vs $? Is it only ever receiving one path at a time?

@e2
Contributor
e2 commented Aug 2, 2016

Yes, the watch is matched against all files individually (out of the batch of changed files).

The "\z" and "$" make no difference, unless people have newlines in their file names (unlikely).

If you have any suggestions, feel free to open issues with ideas. I'm sometimes too deep into these projects, so it's easy for me to miss the obvious.

Tweaks like these seem small, but they actually save people a lot of time and frustration - and that's a big thing.

@brendon
brendon commented Aug 2, 2016

Thanks @e2, that makes sense to me. My template developer is much happier with the performance of not having to refresh the whole page now :)

Thanks also for your feedback. It's great to hear these things make a difference for others :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment