Swap gulp-connect for browser-sync

gulp-connect has fallen out-of-date and has dependencies with security
vulnerabilities.

CONTRIBUTING.md

@@ -7,7 +7,7 @@ agree to abide by the thoughtbot [code of conduct]. Here’s a quick guide:
 
 While developing and contributing to Bitters you can use gulp to spin up an
 example site to help preview your changes! Running `gulp` to pull in the
-stylesheets and serve a small HTML preview page at `http://localhost:8000`.
+stylesheets and serve a small HTML preview page at `http://localhost:3000`.
 
 ## Getting started
 

Gulpfile.js

@@ -1,32 +1,32 @@
-var bourbon    = require("bourbon").includePaths,
-    connect    = require("gulp-connect"),
-    gulp       = require("gulp"),
-    sass       = require("gulp-sass");
+const bourbon = require('bourbon').includePaths;
+const browserSync = require('browser-sync').create();
+const gulp = require('gulp');
+const sass = require('gulp-sass');
 
-var paths = {
+const paths = {
   scss: [
-    "./core/**/*.scss",
-    "./contrib/*.scss"
+    './core/**/*.scss',
+    './contrib/*.scss',
   ]
 };
 
-gulp.task("sass", function () {
+gulp.task('serve', ['sass'], function() {
+  browserSync.init({
+    open: false,
+    server: './contrib',
+  });
+
+  gulp.watch(paths.scss, ['sass']);
+  gulp.watch('contrib/*.html').on('change', browserSync.reload);
+});
+
+gulp.task('sass', function() {
   return gulp.src(paths.scss)
     .pipe(sass({
-      includePaths: ["styles"].concat(bourbon)
+      includePaths: ['styles'].concat(bourbon),
     }))
-    .pipe(gulp.dest("./contrib"))
-    .pipe(connect.reload());
+    .pipe(gulp.dest('./contrib'))
+    .pipe(browserSync.stream());
 });
 
-gulp.task("connect", function() {
-  connect.server({
-    root: "contrib",
-    port: 8000,
-    livereload: true
-  });
-});
-
-gulp.task("default", ["sass", "connect"], function() {
-  gulp.watch(paths.scss, ["sass"]);
-});
+gulp.task('default', ['serve']);