浏览器同步-PHP和htaccess - Browser Sync - PHP and htaccess?

Browser Sync - PHP and htaccess?

本文关键字：htaccess -PHP 同步浏览器 | 更新日期: 2023-09-27

我目前正在使用Yeoman Generator Gulp Webapp，我对其进行了轻微修改，使其能够与PHP一起使用。我只是简单地添加了gulp-connect-php&http代理通过添加以下代码编辑了gulpfile.babel.jsbrowserSync任务。现在，我需要找到一种方法，使其与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']);
});

我能够使用PHP和htaccess！

我没有使用gulp-connect-php来创建vhost，而是使用了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 vhost。

现在一切正常！！

也许这对那些遇到这种情况的人来说仍然有用。

如果你在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+浏览器同步

也很容易，只需从这个gullfile中复制代码：

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