当通过https使用自定义打开连接配置时，grunt watch不再刷新Chrome

Question

我刚刚启动了一个新的yo angular脚手架，并尝试配置grunt-contrib-connect来打开自定义ssl域名而不是localhost：9000。自定义域是使用nginx从https://api/到http://localhost:9000的proxy_pass。

grunt-contrib-connect和grunt-contrib-watch分别更新为0.7.1和0.6.1。

新设置在初始启动时工作正常（grunt serve），但现在html / css / js / etc更改不再触发浏览器重新加载。我还需要改变什么？控制台显示检测到更改但浏览器未刷新。

带有原始版本和修改版本的

Full gist of Gruntfile.js。

...snipped...
// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      // default: open: true,
      // modified custom target
      open: {
        target: 'https://mydomain.dev'
      }
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ]
    }
  }
}
...snipped...

看起来主要问题是livereload.js文件正在尝试从未启用SSL的端口加载。如何在没有端口的情况下配置监视或连接以提供此文件？

也许注入脚本的技术与为连接应用程序运行https nginx proxy_pass不兼容？如何摆脱港口？没有端口可以提供服务吗？

Answer 1

livereload.js将设置一个websocket连接到JS服务的同一个主机，所以你可能还需要配置nginx来做websocket代理。 http://nginx.org/en/docs/http/websocket.html听起来你的websocket不存在，因为你没有看到重载（但看到JS加载好）。我注意到，在grunt-watch中它会输出它正在重新加载文件，但只有在有连接的客户端时（你仍然会看到文件更改的输出，而不是... Reload path/to/file ...行。

从我在github上的grunt-contrib-watch和tiny-lr repos中看到的，livereload.js应该尝试创建一个websocket连接，该连接与JS加载的站点的协议相匹配。因此，如果页面是https：//，它将尝试建立wss：//连接，而对于http：//，则建立ws：//连接。因此，请确保将nginx配置为代理相应的一个（或两者）。

我相信你需要将websocket请求代理到同一个端口，因为你要将livereload.js文件代理到。