我在我的网站上使用 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
最佳答案
您的第一次尝试是正确的,当然,这样您就可以让 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 - BrowserSync 与自定义 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36012868/