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!