Ripple runs your browser and emulates the parts of the device that PhoneGap and Cordova interact with. It displays your mobile app in an appropriately sized iframe (with some nice chrome around it to make it look like it’s on a phone/tablet). It lets you send mock GPS coordinates, simulate Accelerometer events, all that jazz. It also sets CSS properties on the iframe so that your responsive CSS gets invoked based on appropriate device-width, device-height and pixel-density-ratio properties. Nice!
OK, cool, I’m sold! So, how do you use it? Ripple is a CLI tool that you install via NPM. Once installed you can run a command like ripple emulate and it will fire up a web server for the content in you www directory and inject it’s awesomeness right into the web server when you hit it with your browser. That’s all fine and good but I prefer to use Grunt to do a lot of preprocessing on my files (minification, concatination, copy files all over the place, etc). All of my Grunt tasks need to be run before I can call let Ripple do it’s thing. I also like to use a Grunt watch task to re-run my Gruntfile when I make changes to HTML, CSS or JS. So it would be ideal if I could just have a Grunt task that would fire up the Ripple emulator. But that didn’t exist…so I made one! 🙂 It turns out that making a Grunt plugin isn’t that hard.
I’m going to assume that you already have Grunt installed and working in your project. If not, go check out gruntjs.com/getting-started I’ll wait…
OK, so let’s start by getting the grunt-ripple-emulator plugin:
$ npm install grunt-ripple-emulator --save-dev
Now add a ripple section to your Gruntfile and add ripple to one of your Grunt tasks:
All done! Just run:
$ grunt server
and you’re off and running! The task should fire up your default browser and you should now see your app in the ripple emulator. Now you can click through your app, hit up all your favorite F12 tools and get that app ready to ship! Make sure you read the docs in the README file for [grunt-ripple-emulator] so you understand how to make it interact with all your other Grunt tasks.
Originally published at geekindulgence.com.