Gulp-webapp running BrowserSync and 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

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}}";'
      }
    }
  },