Developing Across Multiple Browsers with BrowserSync and Grunt

Reading Time: 3 minutes

I recently switched my dev environment from using MAMP to Vagrant. One of the fallbacks of this switch, however, was my grunt live reload quit working. Whatever, I was never that impressed with my old setup. It was buggy and called for extra scripts being added into the site. I also checked out the Live Reload Chrome extension, but that did a complete page refresh for a minor CSS change.

Nobody has time for that. I want my CSS injected into the browser.

In my constant search of increasing productivity I came across Totally Tooling Tips video on Productivity Apps. The bit about BrowserSync got me itching to fix my own automated reloading with the bonus of browser syncing. And the network throttling sounded like a nice addition.

First a little about my current dev setup. As mentioned earlier I’m running a Vagrant dev environment and using Grunt to compile my SASS, minify my JS, and concatenate files. It’s a pretty basic Grunt setup. If you’re not familiar with Grunt, you’ll need some basic knowledge for this walkthrough. I’d recommend checking out Grunt’s Getting Started guide.

Enter BrowserSync

BrowserSync is a tool that allows you to sync websites across multiple devices and view changes made in real-time. Using Grunt and BrowserSync together you can make a change to an SCSS file, have your new CSS compiled, and see that change instantly across multiple devices. No refresh necessary. Best of all the lovely folks over at JH maintain it and offer it up for free.

Installing BrowserSync

Installation is simple. First you’ll need to get node.js and Grunt setup on your project if you don’t have it already. Then we’ll want to install BrowserSync in our theme directory. So within a terminal window you’ll need to navigate to your theme folder and run the command:

npm install grunt-browser-sync --save-dev

Why –save-dev at the end? Let’s let Grunt explain.

Not only will this install <module> locally, but it will automatically be added to the devDependencies section, using a tilde version range.

Ok. So once that runs you’ll have BrowserSync installed in your theme’s directory. The next step will be to open your Gruntfile.js file and load the BrowserSync tasks using:

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

In my case I’m also using grunt-contrib-sass to compile my SASS, and grunt-contrib-uglify to minify my JS, and grunt-contrib-watch to watch my SCSS files for changes and run the SASS compiling task. So I’ll drop this one below those.

Pretty painless so far, and we’re almost done. Just a few more lines of code to add into our Gruntfile.js. First, we’ll create the tasks for Grunt to perform when the BrowserSync task runs. This will go in the Gruntfile.js above our grunt.loadNpmTasks(‘grunt-browser-sync’);  code.

browserSync: {
    bsFiles: {
        src: [
            'css/main.css',
            'js/main.js',
            '*.php'
        ]
    },
    options: {
        watchTask: true,
        proxy: 'domain.dev'
    }
}

Ok well what does all that mean? browserSync creates the browserSync Grunt task. We’re then using bsFiles to store the files we want BrowserSync to watch for changes. In this case my SASS is compiling to a main.css file in the css folder within my theme. If you’re working straight within a themes style.css you could replace ‘css/main.css’ with ‘style.css’ . My JS is being concatenated and built into main.js, so we’re watching that file as well.

Finally, I’m using a wildcard to watch for any files being changed that end with .php using the line ‘*.php’ . So anytime I make a change to a PHP file in my theme, BrowserSync knows to reload that page to get the new version.

I know I mentioned no refreshes earlier, but with PHP and JS the browser has to refresh. CSS changes on the other hand will magically appear.

The second parameter in my browserSync task is the options . In this we set watchTask to true in order to have BrowserSync watch the files.

Proxy is where we’ll need to set up the domain of our local Vagrant dev site. Don’t worry though. You don’t have to use Vagrant. There are a plethora of options available in the Browsersync options doc. And much more detailed instruction on getting things setup with Grunt.

Finally, we can tie it all together by registering the browserSync task so it is run whenever we run the grunt command in our theme directory in Terminal.

grunt.registerTask('default', ['browserSync', 'watch', 'sass']);

In my case I’m also running my watch and sass tasks as well, but if you don’t have those setup in your Gruntfile.js you won’t need them.

Now, next time we run the grunt command in terminal BrowserSync will pop open a new tab with our site in it. Use the URL in that tab in any device on your network and you’ll be able to watch live updates on your iPad, iPhone, and desktop at the same time. Magic!