Foundation 6 Starter Template Gulpfile with Browsersync

gulpfile.js

var gulp        = require('gulp');
var $           = require('gulp-load-plugins')();
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;


var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("./scss/*.scss", ['sass']);
    gulp.watch("/*.html").on('change', browserSync.reload);
});


gulp.task('default', ['serve']);

Thank for this!

For me works everything when add dot in path with html:
gulp.watch("./*.html").on('change', browserSync.reload);

You helped me a lot. Many thanks for this!

Lastly you can add:
gulp.watch("./css/app.css").on('change', browserSync.reload);

to hot reload on css change

I am running a MAMP site and this worked for me

//define task
gulp.task('bsync', function () {
    //spin up dev server
    browserSync.init({
      proxy: "dev.sitename.local",
      hostname: "dev.sitename.local",
      port: 3000, //even if apache is running on 80 or something else
    });

    //when css files change, reload browserSync 
    gulp.watch('./css/*.css').on('change', function () {
        browserSync.reload();
    });

});

//call task with 'gulp runbsync'
gulp.task('runbsync', ['bsync']);

https://gist.github.com/petergus/31d75a5145e062d4eaa42eb04ce23aea