title: Gulp-webapp running BrowserSync and PHP
body: <p>My main goal here is to adapt Yeoman's <a href="https://github.com/yeoman/generator-gulp-webapp">gulp-webapp</a> development workflow to run PHP.</p>
  
  <p>Specifically, I want to be able to use <code>gulp-php-connect</code> with <strong>multiple base directories</strong> (for the compiled CSS from Sass) and <strong>routes</strong> (for Bower dependencies), if that's even possible.</p>
  
  <p>I'm able to run PHP with Gulp using the <a href="https://www.npmjs.com/package/gulp-connect-php">gulp-connect-php</a> plugin, like this:</p>
  
  <pre><code>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'
    });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's the part of it that I would like to adapt to use <code>gulp-connect-php</code> or any other PHP :</p>
  
  <pre><code>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]);
  });
  </code></pre>
  
  <p>BrowserSync has a proxy option, that allows me to run it with <code>gulp-connect-php</code> server, which is pretty amazing. But I need <code>gulp-connect-php</code> it to use multiple base directories and routes, like <a href="http://www.browsersync.io/docs/options/">BrowserSync</a> does.</p>
  
  <p>So far I've come up with this:</p>
  
  <pre><code>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]);
  });
  </code></pre>
  
  <p>To temporarily fix the <strong>multiple base directories</strong> issue, I tweaked the <code>styles</code> task so it stores the compiled .css to <code>/app</code> instead of <code>.tmp/</code>. 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.</p>
  
  <p>For the <strong>routes</strong> issue, I'm trying to tell <code>wiredep</code> plugin to change a path, say, from <code>bower_components/jquery/dist/jquery.js</code> to <code>../bower_components/jquery/dist/jquery.js</code>, with no success.</p>
  
  <p>All I could do was  manually rename the paths in index.php, and it still doesn't work. When running <code>gulp serve</code> I get:</p>
  
  <p><code>/bower_components/jquery/dist/modernizr.js - No such file or directory</code></p>
  
  <p>...even though I changed the path in index.html to <code>../bower_components/jquery/dist/jquery.js</code>.</p>
  
  <p>I believe that doesn't work because the <code>gulp-connect-php</code> server can't see what's outside the base folder.</p>
  
  <p>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 <code>gulp-connect-php</code>, but I don't know if that's possible. </p>