Two PhoneGap Hooks That Make Life Better

When building your PhoneGap project, Cordova CLI comes with some handy hooks that can automate the tedious aspects of development. Below are two I find invaluable. The first will add any plugins you specify for you. The second will handle your static assets, such as icons and splash screens.

The Hook Rundown

Whether you are building with the PhoneGap or Cordova CLI, you have access to the Cordova hooks. These live in folders which denote the place in your project where they will kick off. These folders used to live in the .cordova/hooks directory, but any new projects will house them in the root hooks dir. Read more on the Cordova hook directory structure here.

The scripts housed in these directories can run in many languages, but we will use Node.js. This allows us to easily perform system tasks, such as moving files.

You can find the node dependencies in the package.json file here. You’ll need both node and these dependencies for the below scripts.

Install Plugins When Adding a Platform

var pluginlist = [
  'https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git',
  'https://github.com/Rickgbw/cordova-plugin-media.git',
  'https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git',
  'https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git',
  'https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git'
];

var sys = require('sys'),
    exec = require('child_process').exec;

function puts(error, stdout, stderr) {
  sys.puts(stdout);
}

pluginlist.forEach(function(plug) {
  exec('phonegap local plugin add ' + plug, puts);
});

This hook runs when adding a new platform (iOS, Android, etc.) and lives in the after_platform_add subdirectory. What it does is grabs the phonegap plugins from the array of URLs, and runs the plugin add command on each. That way when you add Android to your iOS app, you don’t need to manually reinstall the plugins. This also helps if you have multiple users working on the code.

Copy Icons to Platform Directories on Build

var ncp = require('ncp').ncp,
    transfers = [
      {
        'source': './app/assets/iOS/icons',
        'destination': './platforms/ios/yourApp/Resources/icons'
      },{
        'source': './app/assets/iOS/splash',
        'destination': './platforms/ios/yourApp/Resources/splash'
      }
    ];

ncp.limit = 16;

transfers.forEach(function(transfer) {
  ncp(transfer.source, transfer.destination, function (err) {
    if (err) {
      return console.error(err);
    }
    console.log('====== Assets moved from ' + transfer.source + ' to ' + transfer.destination + ' ======');
  });
});

This hook runs after preparing a new build with the PhoneGap CLI and live in the after_prepare subdirectory. You can use this hook for transferring any needed files, but I’m using it above to transfer static assets, such as icons and splash images, to the appropriate directories for each platform.

You can download these hooks on Github here. If anyone has more hooks that make PhoneGap development easier, please drop me a line.

Happy coding!

Resources:

Github repo
Great write by Devgirl on hooks