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!

Advertisement