前言

最近回鍋看了一下 Phongap 居然已經出到 3.0 ! 曾經以為這東西應該慢慢會被 Native App 取代掉的 , 到現在又更新了而且Support 的平台和完整性也變很高 !! 想當然就想要和最近在公司學到的東西作結合.
結果查了一下真的有人已經有在用這個Solution了 , 所以就簡單筆記一下吧 .

Phonegap + Yeoman + Webapp

Install Phonegap

sudo install -g phonegap

Install Yeoman

sudo install -g yo

建立一個 Phonegap 的 project

phonegap project_path "com.project_name.app" "app_name"

create for Android or iOS

cd project_path
phonegap build android

init yeoman

yo webapp

copy Phonegap Config file

copy ../www/config.xml ./app/

Change GruntFile.js

這邊的設定主要是, Grunt build 時把我們Yeoman 產生的web file 全數取代 phonegap 當中的 www
所以在執行 grunt build 時 會先 clean(清除 phonegap 中的 www) , 在 Copy (連xml一起copy)
最後 Deploy 到 ../www

var yeomanConfig = {
  app: 'app',
  dist: '../www'
};

clean: {
  options: {
    force: true
  },
  ...

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt,xml}',
        '.htaccess',
        'images/{,*/}*.{webp,gif}',
        'styles/fonts/*'
      ]
    }
   ...

Test it!!

先用 Grunt 把 HTML 的File build 到 ../www 然後 Compile 進Android 或是 Android Emulator.

grunt build
phonegap run android

結論

Phonegap 3.0 真是還蠻不錯的, 可以直接Compiler 進 Android , 完全不用打開肥大的 IDE 好爽~ , 加上Yeoman 把整個FED 環境弄起來, 5min 內就能佈署好 Mobile App 的開發了 ya~~

題外話

本來是用 angular 想說來練習一下的, 不知道是哪邊的問題在 deploy 到手機後, 反而畫面是全白的 ... 目前原因不明, 所以先使用最基本的webapp generator 來產生, 就一切正常了 , 真是太詭異了!! Anyway 接下可以開始準備Coding囉!!