Grunt - Synchronised Testing Between Browsers/Devices
13 May, 2013
Today I discovered how easy it is to synchronise testing between browsers/devices when using
UPDATE: It has been pointed out to me that I should make it clear that
grunt server is part of Yeoman’s Gruntfile. If you’ve set up your project not using Yeoman then this command might be different.
When you run
grunt server from the root directory of your project it watches for changes to your site files and refreshes the browser window automatically (using the grunt task grunt-contrib-watch).
If you used Yeoman to scaffold your project (Yeoman installs Bower and Grunt in one neat package, you should definitely check it out) it would have created a Gruntfile for you with all the necessary code to get the live reload task up-and-running. There’s only one thing you need to change, and that’s the
hostname option. Find the
connect section and if the
hostname is set to
localhost change it to
grunt server and a browser window should open showing you your dev site. The url will be something like
localhost:9000 (9000 being the port).
Then, on your command line run
ifconfig (Update: it has been pointed out to me that `ifconfig` is for OS X - on Windows I believe it should be `ipconfig`) and make a note of your computer’s internal IP address. It will be something like
192.168.100.36 (the last two numbers in the sequence could be anything).
Finally, open the device you want to synchronise to (such as your iPhone), and enter the internal IP address of your computer followed by the port number – it should look something like this:
Now when you make changes to your project files you should see both browser windows update together.
There is one caveat - I think the portable device must be on the same network as the computer, which shouldn’t be an issue if they’re both connected to the same WiFi network.