Question

我在我的网站上使用BrowserSync。以下实时重新加载我的CSS更改，但它会在http://localhost:3000/

打开一个网页

gulp.task('sass-watch', ['theme-css'], browserSync.reload);

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    proxy: 'mysite.com'
  });
});

我的网站是通过Vagrant配置的，可以在mysite.com上本地访问。如何让BrowserSync在此自定义URL上运行？

我尝试了以下操作，因为我的VM正在使用端口80.

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    open: 'external',
    host: 'mysite.com',
    proxy: 'mysite.com',
    port: 80
  });
});

但是我收到错误：

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES 0.0.0.0:80
    at Object.exports._errnoException (util.js:874:11)
    at exports._exceptionWithHostPort (util.js:897:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1366:5)
    at module.exports.plugin (/path-to-my-site/node_modules/browser-sync/lib/server/index.js:24:25)
    at Object.module.exports.startServer [as fn] (/path-to-my-site/node_modules/browser-sync/lib/async.js:236:52)
    at /path-to-my-site/node_modules/browser-sync/lib/browser-sync.js:149:14
    at iterate (/path-to-my-site/node_modules/browser-sync/node_modules/async-each-series/index.js:8:5)
    at /path-to-my-site/node_modules/browser-sync/node_modules/async-each-series/index.js:16:16

如果我使用默认端口3000，那么页面加载但我得到错误连接被拒绝。

ERR_CONNECTION_REFUSED

Answer 1

对于像我这样在Google上遇到此问题的其他人：“port”选项指定您希望BrowserSync监听的端口，而不是它将代理的服务器正在侦听的端口。这个问题中的设置问题是它正在尝试分配BrowserSync来侦听Vagrant已经在监听的同一个端口。

如果删除“port”选项，BrowserSync默认为端口3000，您将能够在mysite.com:3000成功访问它。这大致是我目前正在使用的设置。或者，如果您将Vagrant重新分配给另一个端口（例如，8080），则应该能够将BrowserSync分配给端口80，然后直接在mysite.com上访问BrowserSync。

Answer 2

您的第一次尝试是正确的，当然，这样您就可以通过http://localhost:3000获得浏览器同步服务，这是默认设置。

第二个没有错，除了你试图分配给browserSync的地址已被vagrant使用。

因此，如果您希望browserSync位于mysite.com上，您应该配置vagrant以获取其他内容。

如果您这样做，则脚本变为：

gulp.task('browser-sync', function() {
  var files = [
    'htdocs/themes/custom/my-theme/dist/*'
  ];
  browserSync.init(files,{
    open: 'external',
    host: 'mysite.com',
    proxy: 'mylaravel.com',
    port: 80
  });
});

Answer 3

您正尝试以非root用户身份启动节点。默认情况下，Linux只允许root用户绑定到1024或以下的端口。

带有自定义URL的BrowserSync

3 个答案: