tisdag 11 mars 2014

Building Cordova apps with Yeoman

It is really quite easy to get Yeoman and Cordova to work together:
First install all the required stuff:

$ npm install yeoman -g
$ npm install cordova -g




In this example I am using the angular generator, but it should work with any yeoman generator

$ npm install -g generator-angular




Now, create a yeoman app

$ mkdir myAngularApp
$ cd myAngularApp
$ yo angular

Then, create a subfolder where the cordova stuff will live:

$cordova create cordova
$cd cordova

Add some platforms (ios, android). Note that each platform require their own sdk:s, which you will have to install. I am using ios.

$ cordova platform add ios  

back to the yeoman app
Aaaalmost done. We just have to make some changes to our Gruntfile. We want grunt to copy all of our yeoman stuff into the cordova app, so open the gruntfile.

First, change the dist folder to
dist: 'cordova/www'
This means that any time we run
$ grunt build
our minified scripts will be put in the cordova folder.

But it is really difficult to debug minified code, so we also want to be able to publish our source code. Add the following to the copy section of the grunf file:

cordova: {
        files: [{
          expand: true,
          dest: 'cordova/www',
          cwd: 'app',
          src: [
            '**',
          ]
        }]
      },


Now, by running

$ grunt copy:cordova

 we copy all of our source code over to cordova.

Now try it out by running

$ grunt copy:cordova
$ cd cordova
$ cordova run ios

This should open up an ios simulator, or deploy to an ios device if it is connected via usb cable to the computer.

Inga kommentarer:

Skicka en kommentar