As responsive design becomes more important with each passing day; it becomes essential to find an efficient way to test your site on as many screen sizes as possible. In the past, responsive design testing meant running around the office and borrowing as many devices as you could. Loading up the site on each and testing individually.

Tools for testing lots of devices/browsers exist, e.g. BrowserStack and SauceLabs, but they seem sluggish. You end up in a browser based virtual machine that operates quite slowly. Besides, there is a pleasure in running around the office and stealing a coworkers device.

As a Drupal developer, you can sometimes feel “out of the loop”. What are all the kids using these days? You can have nice things too. Nice things are called BrowserSync. Can you use BrowserSync if you don’t know what Ruby on Rails is? Yep, you can.

BrowserSync allows you to “sync” multiple browsers. Sync, in this case, means scrolling, links, and form input will happen simultaneously on each connected device.

There is a bit of setup that goes into getting it to work, but we’ll walk through each step. Warm up that terminal...

Setup

You’ll need to install node.js first.

If you’re on a Mac, here are some instructions: http://blog.teamtreehouse.com/install-node-js-npm-mac

If you’re running Windows, I would suggest you stop reading this and install Ubuntu.

If you are using a nice open source operating system like Ubuntu or Debian you should be able to grab it from the repos: sudo apt-get update sudo apt-get install nodejs

You’ll also want to grab the node.js package manager, npm: sudo apt-get install npm

Next up is grunt.js. Grunt is a JavaScript task runner that can automate a lot of tedious tasks for you. We’ll be using it solely with BrowserSync in this example, but check out all the plugins!

With node.js installed, we can use the npm package manager to get Grunt: sudo npm install -g grunt-cli

This will install Grunt globally and should allow you to run it from anywhere.

Grunt project

A Grunt project generally consists of two files: package.json and Gruntfile.js. The package.json file tells node what the projects dependencies are. The Gruntfile.js will define what Grunt is going to do for us.

To start, create a package.json file. If you are working with a Drupal site; you would put this somewhere like sites/all/themes/my_theme/package.json. Add the following: { "name": "hello-grunt", "version": "0.1.0", "devDependencies": { } }

Next, create a Gruntfile.js in the same directory as package.json. Start out with this: module.exports = function(grunt) {

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), });

};

Now that we have our basic structure we can start adding the cool stuff. Fire that terminal back up and navigate to your newly created files. We need to add a couple of node modules: npm install grunt --save-dev npm install grunt-browser-sync --save-dev

This will download Grunt and the BrowserSync Grunt plugin. It will modify your package.json file to include them as dependencies (that’s what the --save-dev does). Go ahead and open your package.json file if you don’t believe me!

We now have our project dependencies downloaded. Let’s add some more meat to our Gruntfile.js: module.exports = function(grunt) {

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),

browserSync: { dev: { bsFiles: { src : 'css/style.css' }, options: { injectChanges: false } } }

});

grunt.loadNpmTasks('grunt-browser-sync');

grunt.registerTask('default', 'browserSync'); };

Basically, we are telling BrowserSync to watch for changes to our style.css file. When it detects a change, it will reload the page. The injectChanges option forces a page reload instead of just injecting the modified CSS. The Live CSS module might be able to help with injecting CSS into a Drupal site.

Magic

It’s time to run Grunt and have it works its magic. In the directory where your Gruntfile.js file is located run: grunt

At this point you should be able to fire up a browser and navigate to your site. There should be a quick notification in the upper right corner of the screen saying that you have “Connected to BrowserSync”.

Now, fire up another browser and navigate to your site. Try scrolling. With any luck the two browsers should be synced up and should scroll at the same time! You can navigate through the site on one browser and the other browser should follow. Change some CSS is your style.css file and see if both browsers reload for you.

Grunt and BrowserSync can do a lot more. There will be a part two to this post where things like SASS, image compression, testing mobile devices, new BrowserSync 2.0 features, and more are shown! This is just the beginning of what these two amazing pieces of software can accomplish together.