How to add Browser Sync to Gulp in the WVU Design System

Browser Sync is a popular tool that will reload your browser when you hit save in your text editor. It will also provide you with a local IP address which you can use to load your website on anything that is on the same wireless network. This is helpful for testing on your mobile device or through a virtual machine (like Modern.ie's VM's, for example).

How to get BrowserSync working inside Gulp

1. As usual, make sure Hammer is running by typing hammer-start.
2. Make sure that you have NodeJS and Gulp installed and working properly.
3. Next, in a new terminal window, open the directory of your theme (something like ~/Sites/cleanslate_themes/my-theme-name).
4. Once inside your theme, run npm install --save-dev browser-sync. This will install Browser Sync and add it to your package.json file under devDependencies.
5. Once you've installed Browser Sync, open up gulpfile.js at the root.
6. Before proceeding, take note of the javascript files listed under the move-js-files task. If the paths are different from what you see below, replace the file paths below with the file paths in your pre-existing Gulpfile.
7. Now that both files have the same file paths, delete everything inside of gulpfile.js, then paste in the code below (being sure to mind the last step). Save the file.
8. Now that everything is in place, type gulp in your terminal. You should see some extra output in your terminal. Look for a URL under Access URLs. Copy the URL there (likely something like http://localhost:3000) and paste it into your browser.

Congrats, you just added Browser Sync to your project. This will make local development much faster.

gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();
var path = require('path');

// This task moves JS files from our node_modules folder to the
// root `javascripts/vendor` folder.
// It runs automatically after `npm install/ci` or can be run via
// `npm run postinstall` OR `gulp move-js-files`.
gulp.task('move-js-files', function () {
  gulp.src([
    './node_modules/twitter-fetcher/js/twitterFetcher_min.js',
    './node_modules/fontfaceobserver/fontfaceobserver.js',
    './node_modules/magnific-popup/dist/jquery.magnific-popup.min.js',
    './node_modules/responsive-nav/responsive-nav.js'
  ], { base: './node_modules' })
    .pipe(rename(function (file) {
    // this removes the last parent directory of the relative file path
      if (file.dirname.split('/').length > 1) {
        file.dirname = file.dirname.split('/')[0];
      }
    }))
    .pipe(gulp.dest('./javascripts/vendor'));
});

// Browser Sync
gulp.task('browser-sync', function () {
  browserSync.init({
    proxy: 'localhost:2000',
    open: false
  });
});

// Sass task
// Compile Our Sass from the 'scss' directory
gulp.task('sass', function () {
  return gulp.src(['./scss/*.scss', '!./scss/_*.scss'])
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(gulp.dest('./stylesheets'))
    .pipe(browserSync.stream());
});

// Use Sass, watch & Browser Sync in the default task. Watching HTML, JS & YAML.
gulp.task('default', ['sass', 'browser-sync'], function () {
  gulp.watch(['scss/**/*.scss'], ['sass']);
  gulp.watch('views/**/*.html').on('change', browserSync.reload);
  gulp.watch('**/*.yml').on('change', browserSync.reload);
  gulp.watch('javascripts/**/*.js').on('change', browserSync.reload);
});