Browser Sync - PHP and htaccess? - php

Question

I'm currently using the Yeoman Generator Gulp-Webapp, which I modified slightly to make it work with PHP. I simply added gulp-connect-php & http-proxy then edited the gulpfile.babel.js browserSync task by adding the following code. Now I would need to find a way to make it work with htaccess. Any idea how this could be done?
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']);
});

Answer 1

I was able to make it work with PHP and htaccess!
Instead of using gulp-connect-php to create the vhost, I used XAMPP. I then target the proxy to the XAMPP vhost. Here's how I did it:
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']);
});
I removed phpConnect.server() and changed the proxy.web() to target my XAMPP vhost.
Now everything's working!!

Answer 2

Perhaps this can still be usefull for those bumping into this.
If you're developing on Mac, you can use MAMP and gulp-mamp, by far the easiest way to get things working - PHP, htaccess and MySQL if need be.
https://www.npmjs.com/package/gulp-mamp
After installing, you can get things to work with just this code in your gulpfile:
var mamp = require('gulp-mamp');
gulp.task('mamp-start', function(cb){
mamp(options, 'start', cb);
});
And then adding the task to the default task, or via command gulp mamp-start.
Mamp + Browser sync
is also very easy, just copy the code from this gulpfile:
https://github.com/sdotson/gulp-mamp-browsersync/blob/master/gulpfile.js