BrowserSync 与自定义 URL

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

您的第一次尝试是正确的，当然，这样您就可以让 browserSync 在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
  });
});