Famo.us on devices with Grunt and Cordova
The all mighthy famo.us people are building a wrapper for native apps as we speak I’m hearing. It’s supposed to be better then Cordova/Phonegap, but since I’m pretty familier with Cordova I thought of giving it a go and testing the juice.
What do you need?
1: Yeoman famo.us generator
2: Cordova installed and available on command line.
Lets do this!
First I created a project:
yo famous
Then I created a new Cordova project, and added the iOs platform with a plugin:
cordova create platforms com.frankbolviken.Geo Geo cd platforms cordova platform add ios cordova plugin add org.apache.cordova.geolocation
Now there is a Cordova project defined, with iOs added as a platform with the addition of a geolocation plugin. As I inspected the platforms/www directory, I saw that there was a folder there. I deleted that, so that it only contained config.xml. Same for platforms/ios/www.
Basically I had now everything I needed to test this, but I wanted to do more! I wanted to optimize it so that I did not manually have to copy stuff to the platforms/www folder, and then initiating a build.
Whats next?
I wanted to be able to just to a simple command like ‘grunt native’, and It should build everything, copy the resources to platforms/www folder and initiate a Cordova build.
First step was to make sure that Grunt automagically copied the stuff needed to the platforms/www folder.
1: in grunt/copy.js I added the following lines after ‘dist’:
deploy: {
files: [{
expand: true,
cwd: '<%= config.dist %>',
dest: 'platforms/www',
src: ['**/*']
}]
}
I then added a new task in Grunt, which build the project, and copied the required content:
grunt.registerTask('native', [
'build',
'copy:deploy'
]);
If I know executed ‘grunt native’ in the terminal, the source was built, and copied. Sweet!
Enter Exec
I wanted to also automatically create the Cordova build, so that the only thing I needed to do in XCode was to hit “play”.
Firstly, I installed the grunt-exec plugin:
npm install grunt-exec --save-dev
I then added a new file inside the grunt folder, called exec.js with the following content:
// Copies remaining files to places other tasks can use
module.exports = {
native: {
cmd: 'cordova build ios',
cwd: 'platforms',
stdout: true,
stderr: true
}
};
Lastly I added the exec:native target in the native task we created earlier, so that it looks like this:
grunt.registerTask('native', [
'build',
'copy:deploy',
'exec:native'
]);
When I know executed ‘grunt native’, the application was build and copied to platforms/www, and the iOS project was build.
I opened up the project in XCode, hit “play”, and wolla.. Win!
Frank Bølviken 