PhoneGapを使用する 2 - PhoneGap + Grunt で自動化 -

最近仕事でお世話になっているPhoneGap

タイトルがPhoneGapを使用する 2 となってますが、
実は随分前にPhoneGapを触っていた事があります。

その時から全然触ってなかったら、npmのバージョンが

$ npm -v
1.4.28

古い・・・古いすぎる!!
早速バージョンアップ

$ npm update -g npm
$ npm -v
3.8.7

すごいバージョンの差 ^^;

そんなこんなで今回はPhoneGapをタスクツールのGruntと
組み合わせてやってみたいと思います。

ちなみに・・・

---

PhoneGapと並んでよく出てくるワードでCordovaというのがあります
両者の違いですが、公式のFAQでは

PhoneGap is an open source distribution of Cordova. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.

となっています。
CordovaをWebkitに例えるならば、PhoneGapはWebKitから派生したSafariやChromeみたいなもので、PhoneGapはCordovaを内包してるようなイメージです。

実際、PhoneGapはCordovaの全ての機能が使えます。

環境セットアップ

---

※ ここではPhoneGapのコマンドラインツールであるPhoneGap CLIを使用します!!

↑のnpmのアップデートをやりましたが、最初からセットアップする場合、
Node.jsのインストールが必要です。

Node.js

次に最新のPhoneGap CLIをインストールします。

$ npm install -g phonegap@latest

プロジェクト作成から実行まで

---

次にプロジェクト作成〜実行まで一気にやりたいと思います。

# プロジェクトの作成
$ phonegap create <path> --id <id> --name <projectname>
# プラットフォームの追加(ios や androidなど)
$ phonegap cordova platform add <ios/android> --save
# ビルド
$ phonegap cordova build <ios/android>
# 実行
$ phonegap cordova run <ios/android>

※ と思ったらphonegapコマンドで以下のようなエラーが・・・

module.js:340
    throw err;
          ^
Error: Cannot find module 'phonegap-build-api'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/phonegap/node_modules/phonegap-build/lib/phonegap-build/login.js:6:14)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

やっぱりアップデートが極端だったから?
色々試してもダメだったので、phonegapを再インストールしてみ他ところエラーがなくなりました。

$ sudo npm uninstall -g phonegap
$ npm install -g phonegap

エラーがなくなった所でビルドと実行をGruntのタスク化にしてみたいと思います。
タスク化するにあたりgruntとgrunt-execをインストールします。

$ npm install -g grunt-cli
$ npm install grunt --save-dev
$ npm install grunt-exec --save-dev

プロジェクトのビルドと実行をタスク化してみたいと思います。

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-exec');

  grunt.initConfig({
   exec: {
      build: {
         command: 'phonegap cordova build'
      },
      run: {
         command: 'phonegap cordova run'
      }
   }
  });

  grunt.registerTask('default', ['exec:build', 'exec:run']);
};

これで

$ grunt

とするとビルドと実行が可能になりました^^。