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

Question

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

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

在MAMP设置下,

1. Apache端口:80
2. Nginx端口:80
3. 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);
});

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

1. 不要错过.create和.init(),因为我们在这里指的是一个实例.
2. 如果您使用某些测试本地服务器(如MAMP),请小心使用"代理"而不是"服务器".
3. 请注意,我使用的URL地址是指index.php的位置
4. 最后,'.(改变","browserSync.reload)"改为RELOAD.

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