在本地主机测试环境中使用 Gulp 的浏览器与 MAMP 同步

Question

我四处搜索，但没有 post 指出在本地主机测试环境中使用 Gulp 的 BrowserSync 时要避免的漏洞。所以这是 post.

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

在 MAMP 设置下，

Apache 端口：80
Nginx 端口：80
MySQL端口：3306

gulpfile.js

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

//tasks for development
// Start browserSync server
gulp.task('browserSync', function() {
  browserSync({
    server: {
        baseDir: "app"
    },
    proxy: "localhost:8080" // can be [virtual host, sub-directory, localhost with port]
});

gulp.task('watch', ['browserSync'], function () {
  gulp.watch('app/*.{php,css,js}', browserSync.reload);
});

由于这里说的是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);
});

文档可能未明确提及的几点注意事项：

不要错过 .create 和 .init()，因为我们在这里指的是一个实例。
如果您正在使用像 MAMP 这样的测试本地服务器，请小心使用 'proxy' 而不是 'server'。
注意我用的URL地址指的是index.php
最后，“.on("change", browserSync.reload)”更改时重新加载。

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

Answer 2

我一直在努力解决这个问题，并找到了一个适用于 MAMP 和自定义本地开发代理的更新解决方案。

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

并替换为

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

希望能节省一些时间！

在本地主机测试环境中使用 Gulp 的浏览器与 MAMP 同步

Using Gulp's browser-sync with MAMP in localhost testing environment

browser

directory

localhost

gulp

browser-sync