在localhost测试环境中使用Gulp与MAMP的浏览器同步

Question

我一直在搜索，但是当使用Gulp的BrowserSync和localhost测试环境时，没有任何帖子指出要避免使用的信息。所以这是这篇文章。

我正在使用gulp browser-sync，用MAMP进行测试。现在我无法让我的浏览器同步手表工作。每当我保存文件时，我都想重新加载浏览器。

在MAMP设置下，

1. Apache端口：80
2. Nginx端口：80
3. MySQL端口：3306

gulpfile.js

apply.quarterly(xts, last)

由于我们在这里谈论MAMP，我的目录在htdocs / test中，如下所示：

另外，我的index.php文件位于/ app

中

我在想我在很多层面都犯了错误，但是现在我的解决方案的任何组合似乎都没有帮助，而且我花了好几个小时。有什么建议吗？

Answer 1

最后让它发挥作用。

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('default', function() {
    browserSync.init({
        proxy: "http://localhost/test/app"
    });
    gulp.watch("./app/*.php").on("change", browserSync.reload);
});

很少有事情要注意文档可能没有明确提及：

1. 不要错过.create和.init（），因为我们在这里指的是一个实例。
2. 如果您使用某些测试本地服务器（如MAMP），请小心使用＆＃39; proxy＆＃39;而不是＆＃39; server＆＃39;。
3. 请注意，我使用的网址是指index.php
的位置
4. 最后，＆＃39; .on（＆＃34;更改＆＃34;，browserSync.reload）＆＃39;在RELE上重新开始。

希望我花在这上面的一天能为你节省一些时间。

Answer 2

我为此苦苦挣扎，发现了一个更新的解决方案，可以同时使用MAMP和自定义本地开发代理。

在gulpfile.js gulp.task（'browser-sync'，function（）块中，我删除了： browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );

并替换为

browserSync.init({ proxy: "your/local/dev/url/here" });

希望可以节省一些时间！