Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Livereload CSS and images without browser refresh #490

Closed
wants to merge 1 commit into from

Conversation

bep
Copy link
Member

@bep bep commented Sep 10, 2014

Not sure if this is as-designed or not, but it's stated in the documentation that Hugo may not be the first static site generator to utilize live reload technology, but it’s the first to do it right so I create this issue:

  • I'm used to LiveReload in Grunt (grunt-contrib-watch), and when I make changes to CSS - it will inject the changes without making a reload of the page.
  • In Hugo evey change forces a browser refresh
  • I have confirmed that the only change in /public is the CSS file I changed.

If your normal work flow is writing articles, then this isn't a real issue - but for pixel tweeking in CSS there is a big difference.

@spf13
Copy link
Contributor

spf13 commented Sep 8, 2014

This would be great. The JS library I used doesn't support it, but I'd love to add this feature. It would be trivial on the GO side, it's the JS that I think would be hard. Any Javascript wizards want to add this?

@bep
Copy link
Member Author

bep commented Sep 8, 2014

Just a note:

  • grunt-contrib-watch watch uses a fork of tiny-lr
  • I have also used (successfully with soft reloads of CSS and JS) tiny-lr directly in Gulp (gotta love the naming of these projects).
  • MIT license: https://github.com/mklabs/tiny-lr

@bep
Copy link
Member Author

bep commented Sep 10, 2014

Seems like the JS library in use supports soft reloading just fine.

If I change the hardcoded

wsHub.broadcast <- []byte({"command":"reload","path":"/x.js","originalPath":"","liveCSS":true})

To another hardoced value that matches the file I'm changing:

wsHub.broadcast <- []byte({"command":"reload","path":"/css/cc.css","originalPath":"","liveCSS":true})

Then it only loads the CSS and not the whole page.

I might have a look at this - but even if I'm an experienced developer, this Go is a blank page.

I guess one would have to

  • At least for CSS files (and maybe images), send command with real file paths - but maybe only if one file changes.
  • maybe also expose some configuration for liveCSS and liveImg

Prior to this commit a dummy JavaScript filename was sent to LiveReload when changing a static file (CSS, image etc.), forcing a full browser reload of the page.

This commit fixes this by sending the relative file path of the changed static resource, enabling partial live reloading for CSS- and image-changes. If more than one static file happens to end up in the same changeevent-batch, it will fall back to do a full refresh. To enable this logic, the change events with names ending with ".goutputstream*" is now filtered out as temporary.

Changes in dynamic content behaves like before.

Issue gohugoio#490
@bep bep changed the title Livereload CSS without browser refresh Livereload CSS and images without browser refresh Sep 10, 2014
@bep
Copy link
Member Author

bep commented Sep 10, 2014

Added a fix for this. Works very nice on my site. I opted not to add any configuration options to turn this on/off.

I read in another thread that you consider changing the license for this project so I might just put here that I'm OK with any license (if you pull in my changes).

spf13 pushed a commit that referenced this pull request Sep 11, 2014
Prior to this commit a dummy JavaScript filename was sent to LiveReload when changing a static file (CSS, image etc.), forcing a full browser reload of the page.

This commit fixes this by sending the relative file path of the changed static resource, enabling partial live reloading for CSS- and image-changes. If more than one static file happens to end up in the same changeevent-batch, it will fall back to do a full refresh. To enable this logic, the change events with names ending with ".goutputstream*" is now filtered out as temporary.

Changes in dynamic content behaves like before.

Issue #490
@spf13
Copy link
Contributor

spf13 commented Sep 11, 2014

Thanks for the contribution. This is great. Merged as df489b4

@spf13 spf13 closed this Sep 11, 2014
@spf13 spf13 added this to the v0.13 milestone Sep 11, 2014
@bep bep deleted the enable-css-soft-reload branch April 18, 2017 09:19
@github-actions
Copy link

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants