Issue with browser sync proxy url

I am really new to Gulp and Browser-sync. I have a Wordpress project (wordpress_install) and inside that I have a theme and inside my theme directory I have my gulpfile.js. I am basically trying to create a setup where I can run

browser-sync start --proxy localhost:3000/wordpress_install

in my theme directory and it will automatically open a browser tab with the url localhost:3000/wordpress_install. Then whenever I change and save a any file in my theme directory the browser reloads. I am having an issue with getting this to work, In my httpd.conf file I have my DocumentRoot set to the parent directory of wordpress_install. I have the following gulpfile.js in my Wordpress theme directory.

// Include gulp
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
        return gulp.src('js/*.js')
                .pipe(jshint())
                .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
        return gulp.src('scss/*.scss')
                .pipe(sass())
                .pipe(gulp.dest('dist/css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('dist'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'));
});

// Watch Files For Changes
gulp.task('watch', function() {
       gulp.watch('js/*.js', ['lint', 'scripts']);
       gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

gulp.task('browser-sync', function() {
        browserSync.init({
                proxy: "http://local.dev"
        });
});

// process JS files and return the stream.
gulp.task('js', function () {
        return gulp.src('js/*js')
                .pipe(browserify())
                .pipe(uglify())
                .pipe(gulp.dest('dist/js'));
});

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], browserSync.reload);

// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {
        // Serve files from the root of this project
        browserSync.init({
                server: {
                        baseDir: "./"
                 }
        });
        // add browserSync.reload to the tasks array to make
        // all browsers reload after tasks are complete.
        gulp.watch("js/*.js", ['js-watch']);
});

// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {
        // Serve files from the root of this project
        browserSync.init({
                server: {
                        baseDir: "./"
                 }
        });
        gulp.watch("*.html").on("change", reload);
});

When I run this command

browser-sync start --proxy localhost:3000/wordpress_install

in my theme directory the browser takes a long time to load and I get a

The localhost page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE from Chrome. I don't know what I'm doing wrong any help would be greatly appreciated!

BrowserSync / browser-sync

Issue with browser sync proxy url #1069