Using Grunt to Automatically Build Your PhoneGap/Cordova Projects

Earlier this week I blogged about the relaunch of Ripple, a great tool for building your mobile applications with Chrome. One of the issues with the new version of Ripple is that when you edit your code, you have to run "cordova prepare" to copy the assets into your platform before you can view it in the browser.

You can get around this by just directly editing the code in your platform directory, but by doing so you run the risk of accidentally blowing it away the next time you do a build with Cordova. So the only safe method is to edit in your main www folder and run "cordova prepare" after every single save, which kinda sucks, even if you just use !! to run the last command or up arrow/enter (which should work on both Windows and OS X I believe).

I was thinking about this today and I thought that this could be a good use of Grunt. Grunt is a JavaScript task runner (it reminds me of Ant, but using JavaScript) with a large set of plugins for a variety of tasks. I've been interested in it, but haven't really had an opportunity to make use of it yet. (Check out this article on it over at Smashing Magazine: Get Up and Running with Grunt.)

I knew Grunt supported two different types of plugins I'd need. First is the ability to watch files for changes. The second is the ability to run ad hoc shell scripts. I whipped up the following example. Please note this is my very first Grunt script and I probably did it completely wrong.

module.exports = function(grunt){

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        exec:{
        	prepare:{
        		command:"cordova prepare",
        		stdout:true,
        		stderror:true
        	}
        },
        watch:{
        	files:['www/**/*.*'],
        	tasks:['exec:prepare']
        }
    });

	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-exec');

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

};

Even if you've never seen Grunt before you can probably follow the flow. I've basically told Grunt to run the watch task by default, monitor the www folder (remember, this is where Cordova keeps the web assets it will copy into each platform) and when a change is noticed, run cordova prepare. This copies the assets into the right folder.

Now I can edit my HTML and see the change as soon as I reload my browser, just like the older Ripple. As I said, there is probably an easier way to do this with Grunt, but I enjoyed finally getting a chance to play with it.