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