How do I get gulp + browsersync to work an apache vhost?

Question

I'd like to add gulp, sass and browsersync to my toolkit. I'm now running gulp with a sass and browsersync task configured.

I'm skinning a php app running from a vhost on my local apache server.

I'm attempting to run browsersync from a watch task, using the browsersync's proxy option to use my vhost.

Currently, when I run the watch no server can be found on port 3000. If I navigate to 'localhost:3000' I get chromes 'no web page found' message.

If I navigate to port 3001 I can access browsersync's admin UI. So I know that browsersync is running.

My gulp conf is as follows

/* load plugins */
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browsersync  = require('browser-sync') ;

/*
*  define tasks
*/

gulp.task('sass', function() {
    return sass('assets/sass/main.sass') ;        
}) ;


/*
*  browsersync conf
*/

gulp.task('browser-sync', function() {
    browsersync({
    proxy: 'localhost',
    port: '3000'
    });
});

gulp.task('browsersync-reload', function () {
    browsersync.reload();
});

gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('assets/sass/**/*', ['css']);
});


/* Default task */
gulp.task('default', ['sass'], function() {
    gulp.watch("assets/sass/**.*", ['sass']);
});

Answer 1

If you have installed apache (sample with mamp) you must configure the port at 8080

My config:

 browserSync.init({
      open: 'external',
      host: 'local.dev',
      proxy: 'local.dev',
      port: 8080 // for work mamp
});

Answer 2

BrowserSync "proxy" options should be pointing to where your apache host is serving your app, not where you want to access it.

For example, if I'm running a ruby server on localhost:9000 I would point that in proxy option and access via browser through the url that browsersync will output to me via the commandline

Answer 3

use this instead, add vhost e.g. mysite.local

then

gulp.task('server', function() {
     browserSync.init({
        proxy: "mysite.local"
    });
});