PhoneGap development with Grunt Ripple and a browser

cordova, grunt, phonegap, ripple

I love using PhoneGap to build cross-platform mobile apps. It let's me leverage my web skills to build an app that runs all major mobile platforms. You know what I don't like? Emulators. They suck. They are a pain in the ass to setup. They use too much memory. Getting your app compiled and installed on to an emulator is tedious. And once you get your fancy hybrid mobile app on there, how do you debug your Javascript? I'm using my web skills to build this app and I want to use my web TOOLS as well! That's where the Ripple Emulator comes in. I know, I know. I just said I hate emulators and now here's another one. But this one's different.

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.

grunt-ripple-emulator

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:

grunt.initConfig({  
  ripple: {
    options: {
      path: 'www',
      keepAlive: true
    }
  },
})

And add ripple to one of your Grunt tasks:

grunt.registerTask('server', 'minify','and-all-that','cool-stuff', 'ripple');  

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.

Share this post:


My name is Jeff French. I'm a programmer, public speaker, technologist, husband, father and an all around geek. These are my musings on code, technology and life in general. Please enjoy. :)