Gulp / Harp with BrowserSync

gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var deploy      = require('gulp-gh-pages');
var cp          = require('child_process');
var harp        = require('harp')

/**
 * Serve the Harp Site
 */
gulp.task('serve', function (done) {
  harp.server('.', {
    port: 9000
  }, function () {
    browserSync({
      proxy: "localhost:9000"
    });
    gulp.watch("public/**/*", function () {
      reload({stream: true});
    });
  })
});

/**
 * Build the Harp Site
 */
gulp.task('build', function (done) {
  cp.exec('harp compile . dist', {stdio: 'inherit'})
    .on('close', done)
});

/**
 * Browser-sync task, only cares about compiled CSS
 */
gulp.task('browser-sync', function() {
  browserSync({
    proxy: "localhost:9000"
  });
});

/**
 * Push build to gh-pages
 */
gulp.task('deploy', ['build'], function () {
  gulp.src("./dist/**/*")
    .pipe(deploy());
});

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

Thanks :)

Took this a bit further - now it can fetch the CSS as well! https://gist.github.com/geelen/a5fcb013de67f680cb8d

Not really working, i guess my setup is a bit diffrent /

Used this instead:

https://gist.github.com/jkarttunen/a576e8dabe3a320e224b

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