Skip to content
Steven Spriggs edited this page Mar 31, 2015 · 2 revisions

Hammer + Gulp + BrowserSync = <3

It is a good idea to understand how BrowserSync works when trying to configure it for usage with Hammer.

###Install You will first want to install it:

npm install browsersync --save-dev

When you use the above command you will install the latest version of BrowserSync this version will more then likely be different then any of the examples contained here, or even your last projects version. Keep this in mind. Gulp projects are moving quickly.

###Configure Now configure it in your Gulpfile.js with some snazy tasks:

// Gulp Plugins
var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

// BrowserSync
// Runs a BrowserSync proxy to hammer, will automatically open a new window
// to turn off the auto open, set `open` to false.
gulp.task('browser-sync', function() {
    browserSync({
      proxy: "localhost:2000",
      open: true,
      logConnections: true,
      logSnippet: false
    });
});

// Use Browser Sync in Default Task
gulp.task('default',['browser-sync','sass'], function(){
  gulp.watch(['**/*.html','**/*.yml'], reload);  // runs BrowserSync reload when html or yml files change
});

###Fire up Gulp

Now you will want to want to start Gulp using the gulp command which will run the default task and turn on BrowserSync.

OMG WTF, IT'S NOT WORKING

BrowserSync has been pushing lots and lots of updates. If for some reason your implementation is not working, please take a look at Gulp integration documentation.

Clone this wiki locally