Rails:当视图(和相关)文件更改时自动刷新浏览器

发布于 2024-10-12 23:16:06 字数 598 浏览 1 评论 0原文

我的很多工作(在 Rails 中)实际上以视图、图像、SASS/CSS 和 Coffescript/Javascript 文件为中心,我希望有一个解决方案可以刷新浏览器,每当我对任何此类文件进行更改时文件。有点像 autotest 或 watchr 但用于“设计”任务。

我查看了 watchr 和 fs-event ,它们似乎提供了相关功能并浏览了网络,但我还没有找到任何现成的解决方案。我错过了什么吗?很难相信这还没有完成——这些工具显然是存在的。

假设这样的工具确实不存在,我想尝试编写自己的解决方案。因此,如果您对要考虑什么、在哪里查看有趣的项目等有一些建议——我也将不胜感激。

更新 示例工作流程如下所示:

  1. 在终端中启动“观察程序应用程序”
  2. Rails 服务器如果未运行则启动
  3. 浏览器窗口自动打开,指向 Rails 服务器
  4. 我去更改视图中的一些 HTML
  5. 浏览器自动刷新
  6. 我更新一些
  7. CSS浏览器自动刷新
  8. 我添加了一个新的 JS 文件
  9. 浏览器自动刷新
  10. ...

干杯!

A lot of my work (in Rails) actually centers around the views, images, SASS/CSS and Coffescript/Javascript files and I'd love to have a solution that refreshes the browser, whenever I make a change to any of this type of files. A little like autotest or watchr but for 'design' tasks.

I've looked at watchr and fs-event, which seem to provide related functionality and look around the web, but I couldn't find any ready solution yet. Did I miss something? Hard to believe that this wouldn't have been done yet — the tools clearly exist.

Assuming that a tool like this really doesn't exist, I'd like to have crack at writing my own solution. So if you have some advice on what to consider, where to have a look at interesting projects etc. — I'd appreciate that as well.

Update
An example workflow would look like this:

  1. Start "watcher application" in terminal
  2. Rails server starts if it's not running
  3. Browser window opens automagically pointing to rails server
  4. I go and change a change some HTML in a view
  5. The browser refreshes automatically
  6. I update some CSS
  7. The browser refreshes automatically
  8. I add a new JS file
  9. The browser refreshes automatically

Cheers!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

带刺的爱情 2024-10-19 23:16:06

根据您的描述,我认为 LiveReload 会为您解决问题。

您需要更改 .livereload 文件,以便仅在特定文件更改时重新加载浏览器,但这一切都包含在自述文件中(滚动到配置部分)

还有 XRefresh 可以做几乎相同的事情,但我从未使用过它。

From your description I would think that LiveReload would do the trick for you.

You'll need to change the .livereload file to only reload the browser on specific file change but it's all covered in the readme (scroll to the configuration section)

There's also XRefresh that can do pretty much the same stuff but I've never used it.

不如归去 2024-10-19 23:16:06

尝试 Guard::Livereload。当“查看”文件被修改时,它会自动重新加载您的浏览器。

有关更多信息(和演示),请参阅:http://asciicasts.com/episodes/264-guard

Try Guard::Livereload. It will automatically reload your browser when 'view' files are modified.

For more information (and a demo) see: http://asciicasts.com/episodes/264-guard

活雷疯 2024-10-19 23:16:06

也许您正在寻找类似这个项目的东西?

https://github.com/logankoester/autorefresh

Perhaps you're looking for something like this project?

https://github.com/logankoester/autorefresh

梦魇绽荼蘼 2024-10-19 23:16:06

已经有一段时间了,但我发现了一些我认为比这些选项更好的东西。使用Live.js,您甚至不需要修改您的项目,只需单击书签即可,它会自动更新当事情发生变化时。

唯一的缺点是你会在服务器日志中收到很多 HEAD 请求,但由于我在进行样式编辑时使用它,所以这并没有真正困扰我。我宁愿这样,然后只为了开发工具而修改我的项目。

It's been a while, but I've found something I think is even better than any of these options. With Live.js you don't even need to modify your project, you can just click the bookmarklet and it will automatically update when something changes.

The only downside is that you will get a lot of HEAD requests in your server log, but since I use this when doing style edits that doesn't really bother me. I'd much rather have that then have to modify my project just for a development tool.

眼睛会笑 2024-10-19 23:16:06

对于使用 Hotwire(默认)运行的 Rails 6 或 7,您可以使用 hotwire- livereload gem。它监视资产和视图,并使用 ActionCable(websockets)通过 Turbo 触发刷新。

请注意,示例工作流程中的 #3(打开 Web 浏览器)不会被涵盖。

For Rails 6 or 7 running with Hotwire (default) you can use the hotwire-livereload gem. It watches assets and views and uses ActionCable (websockets) to trigger a refresh over turbo.

Note that #3 (opening a web browser) in your example workflow won't be covered.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文