Harp with BrowserSync! Woo!

gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var harp        = require('harp');

/**
 * Serve the Harp Site from the src directory
 */
gulp.task('serve', function () {
  harp.server(__dirname + '/src', {
    port: 9000
  }, function () {
    browserSync({
      proxy: "localhost:9000",
      open: false,
      /* Hide the notification. It gets annoying */
      notify: {
        styles: ['opacity: 0', 'position: absolute']
      }
    });
    /**
     * Watch for scss changes, tell BrowserSync to refresh main.css
     */
    gulp.watch("src/**/*.scss", function () {
      reload("main.css", {stream: true});
    });
    /**
     * Watch for all other changes, reload the whole page
     */
    gulp.watch(["src/**/*.jade", "src/**/*.json"], function () {
      reload();
    });
  })
});

/**
 * Default task, running just `gulp` will compile the sass,
 * compile the harp site, launch BrowserSync & watch files.
 */
gulp.task('default', ['serve']);

This is awesome.

I am getting an error TypeError: browserSync is not a function. Here is my gulp files:

`
var gulp = require('gulp'),
jade = require('gulp-jade'),
sass = require('gulp-ruby-sass'),
browserSync = require('browser-sync').create(),
harp = require('harp');
// var cp = require('child_process');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('serve', function () {
  harp.server(".", {
    port: 9000
  }, function () {
    browserSync({
      proxy: "localhost:9000",
      open: false,
      /* Hide the notification. It gets annoying */
      notify: {
        styles: ['opacity: 0', 'position: absolute']
      }
    });
    /**
     * Watch for scss changes, tell BrowserSync to refresh main.css
     */
    gulp.watch(["*.css", "*.sass", "*.scss", "*.less"], function () {
      reload("main.css", {stream: true});
    });
    /**
     * Watch for all other changes, reload the whole page
     */
    gulp.watch(["*.html", "*.ejs", "*.jade", "*.js", "*.json", "*.md"], function () {
      reload();
    });
  })
});
//Convert .jade to .html file
gulp.task('jade', function(){
	gulp.src('src/*.jade')
	.pipe(jade({
		pretty: true
	}))
	.pipe(gulp.dest('dist/'));
});

gulp.task("copy_all", function(){
	gulp.src('src/*').pipe(gulp.dest('dist/'));
});

//Convert .scss file to .css
gulp.task('sass', function(){
	sass('src/css/main.scss')
	.pipe(autoprefixer({
		browsers: ['last 3 versions'],
	}))
	.pipe(gulp.dest('dist/css/'))
});

gulp.task('copy_js', function(){
	gulp.src('src/js/*.js').pipe(gulp.dest('dist/js/'))
});

gulp.task('copy_img', function(){
	gulp.src('src/img/**/*').pipe(gulp.dest('dist/img/'))
});

gulp.task('copy_fonts', function(){
	gulp.src('src/fonts/*').pipe(gulp.dest('dist/fonts/'))
});

//Sass watcher
gulp.task('watch', function(){
	gulp.watch('src/css/*.scss', ['sass']);
	gulp.watch('src/css/**/*.scss', ['sass']);
	gulp.watch('src/*.jade', ['jade']);
	gulp.watch('src/**/*.jade', ['jade']);
	gulp.watch('src/js/*.js', ['copy_js']);
	gulp.watch('src/img/', ['copy_img']);
	gulp.watch('src/img/*.svg', ['copy_img']);
	gulp.watch('src/img/**/*.svg', ['copy_img']);
	gulp.watch('src/fonts/', ['copy_fonts']);
});
gulp.task('default', ['serve']);

`