实时重新加载浏览器页面。咕噜和流浪者答案

【问题标题】：Live reload browser page. Grunt and Vagrant实时重新加载浏览器页面。咕噜和流浪者
【发布时间】：2014-01-16 14:46:06
【问题描述】：

抱歉我犯的错误，我不是英国人。

所以.. 首先，我有 Vagrant 机器，它是我的 Web 服务器，安装了 Yii、Ngnix、PHP 等。vm 配置如下：

private_network, 192.168.10.10
forwarded_port, guest: 80, host: 8080
synced_folder "www", "/srv/www", :nfs => true # !important

其次，我在本地机器上安装了 Grunt，并在通过 nfs 守护进程与 Vagrant 同步的 web 根目录中执行一些任务（监视 *.scss 文件并将它们转换为 css）。

我成功完成了我的任务并通过浏览器 (localhost:8080) 连接到我的 Web 根目录，一切正常。但是，当 Grunt 监视我的 scss 文件并完成将它们转换为单个 css 文件时，我不明白如何实现简单的重新加载浏览器页面。

谁能用简单的英语给我一些想法？

【问题讨论】：

看看这个不知道是不是一样但是stackoverflow.com/questions/19382708/…
谢谢，但它是不同的东西..

标签： php yii gruntjs vagrant grunt-contrib-watch

【解决方案1】：

您需要在浏览器中添加一个浏览器插件，然后让 watch 通知它。更多信息在底部： http://24ways.org/2013/grunt-is-not-weird-and-hard/

【讨论】：

我已经尝试过这个（使用 grunt-contrib-watch 的 livereload 选项），但不幸的是它不起作用（不过非常感谢！好文章！
@TimurFayzrkhmanov 猜测它为什么可能不起作用。您的防火墙（在您的主机上或在您的 vagrant 机器上）是否会阻止监视通知的通信？
@TimurFayzrkhmanov 是的，这可能是问题所在。 feedback.livereload.com/knowledgebase/articles/…stackoverflow.com/questions/19268136/…

【解决方案2】：

我通过重启浏览器解决了这个问题！这是小指令：

Gruntfile：

watch: {
    scss: {
        files: '<%= path.webapp %>/**/*.scss',
        tasks: ['sass'],
        options: {
            livereload: true, //! important
        },
    },
}

添加livereload plugin to the chrome。关闭浏览器后！
在命令行启动任务：grunt watch
启动浏览器。然后点击窗口顶部的 livereload 圆形按钮。
瞧！它有效。

重要提示：无需担心“远程”服务器的端口和地址，livereload 会神奇地检测需要重新启动页面的位置。对我来说是 localhost:8080/webapp.com 和 192.168.10.10/webapp.com 一样

【讨论】：