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

Question

我进行了搜索，但是没有帖子指出了陷阱，可以避免在将gulp的BrowserSync与localhost测试环境结合使用时使用。所以这是这篇文章。

我正在使用gulp浏览器同步，并使用MAMP进行测试。目前，我无法让我的浏览器同步 watch 正常工作。每当我保存文件时，我都想重新加载浏览器。

在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)，请小心使用“代理”而不是“服务器”。

请注意，我使用的URL地址是指index.php的位置。

最后，将'.on(“change”，browserSync.reload)'更改后重新加载。

希望我的这一天能为您节省一些时间。