title: Can't use gulp (with gulp-connect-php and gulp-browser-sync) with multiple projects
body: <p>I've recently started using gulp and have a nice workflow but when I added the gulpfile to a new project, every time I run <code>gulp</code> from the original project directory, it serves the newest project and I have no idea what I've done.</p>
  
  <p>This should be the relevant contents of my gulpfile:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var gulp = require('gulp');
  /* etc. */ 
  
  gulp.task('default', function(callback) {
    runSequence(['connect-sync'],
      callback
    )
  });
  
  gulp.task('connect-sync', function() {
    connect.server({
      base: 'app' /* tried ./app */
    }, function (){
      browserSync({
        injectChanges: true,
        proxy: '127.0.0.1:8000'
      });
    });
  
    gulp.start('sass');
    gulp.start('watch');
  
  });
  
  gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
      .pipe(sourcemaps.init())
      .pipe(sass()) // Passes it through a gulp-sass
      .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('app/css')) // Outputs it in the css folder
      .pipe(browserSync.stream({match: '**/*.css'}));
  });
  
  // Watchers
  gulp.task('watch', function() {
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/css/**/*.css', ['css']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/*.php', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
  });
  
  gulp.task('css', function() {
    return gulp.src('app/css/**/*.css')
      .pipe(sourcemaps.init())
      .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
      .pipe(sourcemaps.write('.'))
      .pipe(browserSync.stream({match: '**/*.css'}));
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I change the <code>proxy</code> option to something like <code>proxy: '127.0.0.1:4000</code>, the process doesn't complete and just stalls:</p>
  
  <pre><code>[14:02:41] Using gulpfile ~/original_project/gulpfile.js
  [14:02:41] Starting 'default'...
  [14:02:41] Starting 'connect-sync'...
  [14:02:41] Starting 'sass'...
  [14:02:41] Starting 'watch'...
  [14:02:41] Finished 'watch' after 27 ms
  [14:02:41] Finished 'connect-sync' after 52 ms
  [14:02:41] Finished 'default' after 54 ms
  [Tue Apr 12 14:02:42 2016] Failed to listen on 127.0.0.1:8000 (reason: Address already in use)
  [Tue Apr 12 14:02:42 2016] 127.0.0.1:53340 [200]: /
  [14:02:42] Finished 'sass' after 287 ms
  [14:02:42] Starting 'css'...
  [BS] [info] Proxying: http://127.0.0.1:4000
  [BS] Access URLs:
   -------------------------------------
         Local: http://localhost:3000
      External: http://10.180.90.37:3000
   -------------------------------------
            UI: http://localhost:3001
   UI External: http://10.180.90.37:3001
   -------------------------------------
  [BS] 7 files changed (bootstrap.min.css, font-awesome.min.css, main.css, normalize.css, pe-icon-7-stroke.css, responsive.css, style.css)
  [14:02:42] Finished 'css' after 568 ms
  </code></pre>
  
  <p>I'm not sure if there is something done wrong but literally the only change is trying to pick a different port. I just thought that the task would automatically pick an available port if the one in the config was in use but I have no idea how to now use gulp with multiple projects.</p>
  
  <p>There's no vhost setup for port 8000 or anything in my hosts file that could interfere so there shouldn't be any conflict.</p>
  
  <p>The <a href="https://browsersync.io/docs/options/#option-proxy" rel="nofollow">Browsersync docs</a> say <code>Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site.</code> so I'm not sure why my existing setting ever worked for either project.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Had another look at the <a href="https://www.npmjs.com/package/gulp-connect-php" rel="nofollow">gulp-connect-php docs</a> and tried this which seems to work:</p>
  
  <pre><code>gulp.task('connect-sync', function() {
    connect.server({
      base: 'app',
      port: 4000
    }, function (){
      browserSync({
        injectChanges: true,
        proxy: '127.0.0.1:4000'
     });
    });
  
    gulp.start('sass');
    gulp.start('watch');
  
  });
  </code></pre>
  
  <p>but I'd much prefer avoiding the hardcoding of ports if possible.</p>
  
  <p>Changing any of the sass now injects and reloads the page rather than just injecting, the css still seems to inject fine without a reload.</p>