Gulp-webapp running BrowserSync and PHP - php

Question

My main goal here is to adapt Yeoman's gulp-webapp development workflow to run PHP.
Specifically, I want to be able to use gulp-php-connect with multiple base directories (for the compiled CSS from Sass) and routes (for Bower dependencies), if that's even possible.
I'm able to run PHP with Gulp using the gulp-connect-php plugin, like this:
gulp.task('connect-php', function() {
connectPHP.server({
hostname: '0.0.0.0',
bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php',
ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini',
port: 8000,
base: 'dev'
});
});
However, I'd like to take advantage of gulp-webapp's excellent but quite entangled development workflow architecture, which relies on BrowserSync, Sass compiler (compiles to a .css file into a .tmp folder, for development), auto-prefixer, and uses a bunch of other useful plugins.
Here's the part of it that I would like to adapt to use gulp-connect-php or any other PHP :
gulp.task('serve', ['styles'],function () {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles', reload]);
gulp.watch('bower.json', ['wiredep', 'fonts', reload]);
});
BrowserSync has a proxy option, that allows me to run it with gulp-connect-php server, which is pretty amazing. But I need gulp-connect-php it to use multiple base directories and routes, like BrowserSync does.
So far I've come up with this:
gulp.task('serve-php', ['styles','connect-php'],function () {
browserSync({
proxy: "localhost:8000"
});
// watch for changes
gulp.watch([
'app/*.php',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles, reload]);
gulp.watch('bower.json', ['wiredep', 'fonts', reload]);
});
To temporarily fix the multiple base directories issue, I tweaked the styles task so it stores the compiled .css to /app instead of .tmp/. I'd prefer to have it on a temp folder though, because I don't need that compiled .css file hanging around there with my Sass files.
For the routes issue, I'm trying to tell wiredep plugin to change a path, say, from bower_components/jquery/dist/jquery.js to ../bower_components/jquery/dist/jquery.js, with no success.
All I could do was manually rename the paths in index.php, and it still doesn't work. When running gulp serve I get:
/bower_components/jquery/dist/modernizr.js - No such file or directory
...even though I changed the path in index.html to ../bower_components/jquery/dist/jquery.js.
I believe that doesn't work because the gulp-connect-php server can't see what's outside the base folder.
I'm trying different things, and though I've been pretty vague on this thread's title, I think that the cleanest solution would be to run multiple base directories and routes with gulp-connect-php, but I don't know if that's possible.

Answer 1

I spent a while trying to work this one out, but have a working solution now. The way I solved is was to use BrowserSync as the server, and added a middleware that proxies requests if they don't match a pattern...
Install the http-proxy package...
$ npm install --save-dev http-proxy
Add the proxy package to the top of the gulpfile.js...
var httpProxy = require('http-proxy');
Add a separate php server and a proxy server before the BrowserSync...
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
// ...
Then add the middleware for the server to see if the request needs to be proxied...
// ...
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
// THIS IS THE ADDED MIDDLEWARE
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();
}
}
}
// ...
And here's the full tasks for completeness...
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
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();
}
}
}
});
// watch for changes
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']);
});
Hope this saves you all the time I spent working this out! :o)

Answer 2

FWIW, I've got a quite simple and fair solution for that by placing the compiled .css file in the app/ root and moving /bower_dependencies folder inside the app/ folder.
For Sass, I only needed to change the path in the placeholder to <!-- build:css styles/main.css --> and change the dest in the styles task.
For the bower_components, I just edited bower_components in .bowerrc:
{
"directory": "app/bower_components"
}
and added this to the wiredep stream in gulpfile.js:
fileTypes: {
scss: {
replace: {
scss: '#import "app/{{filePath}}";'
}
}
},