我在我的网站上使用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上运行?

我的虚拟机正在使用端口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

最佳答案

您的第一次尝试是正确的尝试,当然,这样一来,您将获得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
  });
});

关于gulp - 带自定义URL的BrowserSync,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36012868/

10-12 04:50