浏览器同步 - PHP 和 htaccess？答案

【问题标题】：Browser Sync - PHP and htaccess?浏览器同步 - PHP 和 htaccess？
【发布时间】：2023-04-10 22:12:02
【问题描述】：

我目前正在使用 Yeoman Generator Gulp-Webapp，我对其稍作修改以使其与 PHP 一起使用。我只是添加了 gulp-connect-php 和 http-proxy，然后通过添加以下代码编辑了 gulpfile.babel.js browserSync 任务。现在我需要找到一种方法让它与 htaccess 一起工作。知道如何做到这一点吗？

gulp.task('serve-php', ['styles', 'fonts'], () => {
  phpConnect.server({
    port: 9001,
    base: 'app',
    open: false
  });
  const proxy = httpProxy.createProxyServer({});
  browserSync({
    notify: false,
    open: true,
    port: 9000,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
        '/bower_components': 'bower_components'
      },
      middleware: function (req, res, next) {
        var url = req.url;
        if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
          proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
        }
        else {
          next();
        }
      }
    }
  });

  gulp.watch([
    'app/**/*.html',
    'app/**/*.php',
    'app/scripts/**/*.js',
    'app/images/**/*',
    '.tmp/fonts/**/*'
  ]).on('change', reload);

  gulp.watch('app/styles/**/*.scss', ['styles']);
  gulp.watch('app/fonts/**/*', ['fonts']);
  gulp.watch('bower.json', ['wiredep', 'fonts']);
});

【问题讨论】：

apache 遇到什么样的错误？
htaccess 文件根本没有被读取，所以我没有收到任何错误。实际上，它不是 apache 服务器，而是 node.js 的“虚拟”服务器。

标签： php .htaccess gulp yeoman browser-sync

【解决方案1】：

我能够使它与 PHP 和 htaccess 一起工作！

我没有使用 gulp-connect-php 创建虚拟主机，而是使用了 XAMPP。然后我将代理定位到 XAMPP vhost。我是这样做的：

gulp.task('serve-php', ['styles', 'fonts'], () => {
  const proxy = httpProxy.createProxyServer({});
  browserSync({
    notify: false,
    open: true,
    port: 9000,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
        '/bower_components': 'bower_components'
      },
      middleware: function (req, res, next) {
        var url = req.url;
        if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
          proxy.web(req, res, { target: 'http://xamppvhost.dev' });
        }
        else {
          next();
        }
      }
    }
  });

  gulp.watch([
    'app/**/*.html',
    'app/**/*.php',
    'app/scripts/**/*.js',
    'app/images/**/*',
    '.tmp/fonts/**/*'
  ]).on('change', reload);

  gulp.watch('app/styles/**/*.scss', ['styles']);
  gulp.watch('app/fonts/**/*', ['fonts']);
  gulp.watch('bower.json', ['wiredep', 'fonts']);
});

我删除了 phpConnect.server() 并将 proxy.web() 更改为针对我的 XAMPP 虚拟主机。

现在一切正常！！

【讨论】：

【解决方案2】：

也许这对于那些碰到这个的人来说仍然有用。

如果您在 Mac 上进行开发，您可以使用 MAMP 和 gulp-mamp，这是迄今为止最简单的方法 - 如果需要，可以使用 PHP、htaccess 和 MySQL。

https://www.npmjs.com/package/gulp-mamp

安装后，您只需使用 gulpfile 中的以下代码即可完成工作：

var mamp = require('gulp-mamp');
gulp.task('mamp-start', function(cb){
    mamp(options, 'start', cb);
});

然后将任务添加到默认任务中，或者通过命令gulp mamp-start。

Mamp + 浏览器同步

也很简单，只需从这个gulpfile中复制代码即可：

https://github.com/sdotson/gulp-mamp-browsersync/blob/master/gulpfile.js

【讨论】：