Can't use gulp (with gulp-connect-php and gulp-browser-sync) with multiple projects

问题

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 gulp from the original project directory, it serves the newest project and I have no idea what I've done.

This should be the relevant contents of my gulpfile:

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'}));
});

If I change the proxy option to something like proxy: '127.0.0.1:4000, the process doesn't complete and just stalls:

[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

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.

There's no vhost setup for port 8000 or anything in my hosts file that could interfere so there shouldn't be any conflict.

The Browsersync docs say Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site. so I'm not sure why my existing setting ever worked for either project.

UPDATE

Had another look at the gulp-connect-php docs and tried this which seems to work:

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');

});

but I'd much prefer avoiding the hardcoding of ports if possible.

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.

来源：https://stackoverflow.com/questions/36574277/cant-use-gulp-with-gulp-connect-php-and-gulp-browser-sync-with-multiple-proje