如何采用Yeoman + Grunt + Bower開發基于PhoneGap的Hybrid APP

 

一直想開發手機應用，也跟著教程學做了兩個iOS小應用，但開發思維上的轉變需要一個長期的過程，而且iOS系統功能很強大，陌生的地方也很多，很多功能不知道該自己開發還是系統上已經存在，也不了解現在iOS開發的流程。所以對于沒有任何移動平臺客戶端開發經驗的開發人員來說，想要做一個產品級別的產品出來，如果直接采用原生開發，不知道有多少坑要填。幸好現在有Hybrid APP方式，一種介于Web APP和Native APP之間的解決方案。Web APP無需安裝，但需要打開系統上的瀏覽器來運行，因為就是網頁嘛，用戶體驗不太好，操作局限性大。Native APP是安裝在系統上的應用，體驗更好，但是開發難度不小，并且需要針對不同系統開發對應的版本，開發和維護成本太高。Hybrid APP綜合了上述兩種APP的優點，用戶界面通過Web前端技術實現，使用JavaScript調用第三方庫封裝的系統API，這樣一來，不同系統下應用的UI界面不再需要使用原生語言重新開發，只用調用對應的第三方庫即可。

• 為什么開發Hybrid APP
  Hybrid APP——混合APP，就是采用非原生APP的開發語言來制作APP的界面，調用第三方發布的APP中間件在各平臺上運行，關于中間件的介紹請參考《Hybrid App開發實戰》。由此可見，因為有第三方中間件封裝了各種平臺的底層API，Hybrid APP可以實現跨平臺開發，而且沒有原生APP開發經驗的開發人員也可以使用自己擅長的技術來開發APP。特別對于Web開發人員來講，如果沒有這種方式，轉向去學習純原生方式的開發，其成本和難度都不小。在前端方面，現在使用HTML5 + CSS3 + JavaScript可以快速開發出很強大的Web應用，所以能復用Web前端技術在APP開發上真是一件普大喜奔的好事。
  
  
• 如何搭建一個基于PhoneGap的Hybrid APP
  我采用的是PhoneGap作為中間件，它采用命令行的方式來創建工程，所以需要先安裝PhoneGap的命令行工具，并且這個命令行工具要用到npm來安裝，也就是Node.js的包管理工具，所以在自己的開發環境里把Node.js安裝好就可以使用npm了。
  安裝妥當npm之后，全局條件下安裝PhoneGap的命令行工具，在命令行界面輸入如下命令，因為我的環境沒能成功安裝PhoneGap，所以采用cordova代替。
  

  $ sudo npm install -g phonegap
  我沒有成功安裝，于是安裝的cordova
  $ sudo npm install -g cordova

  安裝完畢之后，就可以使用cordova來創建PhoneGap項目。cordova是從PhoneGap提取出來的一個開源項目，在我看來，除了名字不一樣之外，二者沒有什么區別。
  然后在常用的項目文件夾下運行命令：
  

  $ cordova create hello com.example.hello "HelloWorld"
  Creating a new cordova project.
  $ ls
  hello

  create后面第一個參數hello是新建的項目文件夾名稱，第二個參數com.example.hello是公司名稱，第三個參數"HelloWorld"是項目名。在當前目錄下可以看到多了一個文件夾hello。
  然后進到項目文件夾里，添加對iOS的支持
  

  $ cd hello
  $ cordova platform add ios
  $ cordova prepare

  至此，就完成了對基于PhoneGap的Hybrid APP項目的創建工作，接下來用XCode來打開這個項目，運行iOS模擬器來檢驗這個項目能否正常運行。
  啟動Xcode，打開文件/hello/platforms/ios/HelloWorld.xcodeproj
  
  
  
  使用Xcode打開項目后，點擊運行按鈕后，稍等片刻，在模擬器中看到Cordova的界面，就表示成功運行。
  
  
  
  創建其他平臺的流程應該也是類似的，具體操作建議參考官方文檔。
  
  </li>

• 怎樣加入Yeoman + Grunt + Bower開發流程
  通過上面的過程，創建了一個基于PhoneGap的Hybrid APP工程，可是APP本身的開發流程還沒有涉及到。我想采用當前Web前端流行的Yeoman + Grunt + Bower全明星組合，開發一款基于AngularJS的應用，然后將這個Web APP打包后放到PhoneGap的環境下，使用Xcode編譯之后就可以部署到iOS上運行了。
  Yeoman是一個Web APP的腳手架程序，所謂腳手架程序，就是幫助開發者完成搭建一個Web項目時經常重復的項目初始設置的過程，換句話說，就是用一個命令就可以搞定一個項目的初始搭建工作。
  Grunt是現在流行的Web前端自動化開源工具，并且有豐富的插件可以使用。可以完成單元測試，靜態文件合并、縮小，還可以為前端運行一個簡單的Web服務器等很多工作。
  Bower是Web前端的包管理工具，可以使用它來管理Web前端的各種第三方庫，比如jQuery，Bootstrap，AngularJS等。
  以上三者也是通過npm來安裝，既然上面已經安裝過了，現在只需要輸入安裝這三個工具的命令，
  

  $ npm install -g yo bower grunt-cli

  這三個工具安裝完畢之后，在之前創建的Hybrid APP項目文件夾下創建一個Web APP的目錄，比如叫yo，然后安裝用于創建基于angular的Web項目的自動生成器，并運行yeoman來創建一個Web APP項目。
  

  $ mkdir yo
  $ cd yo
  $ npm install -g generator-angular
  $ yo angular

  項目創建完成后，檢查一下項目能否正常運行，在命令行輸入
  

  $ grunt serve

  這樣就啟動了一個Web服務器來運行剛才創建的Web APP，順利的話可以在瀏覽器上看到這個yeoman的實例頁面。
  
  
  好了，現在看看怎么把yeoman創建的項目放到Hybrid APP里運行。
  把Hybrid APP根目錄下的config.xml拷貝到yo/app目錄下，然后修改yo下的Gruntfile.js。
  1，增加xml到copy->dist->files->src中
  2，在copy->dist->files中添加
  {
    expand: true,
    cwd: '../platforms/ios/www',
    dest: '<%= yeoman.dist %>/scripts',
    src: [
    'plugins/**',
    'cordova.js',
    'cordova_plugins.js'
    ]
  }
  3，在clean中增加options: {force: true}
  
  修改后代碼如下：
  

  // Copies remaining files to places other tasks can use
  copy: {
    dist: {
      files: [{
        expand: true,
        dot: true,
        cwd: '<%= yeoman.app %>',
        dest: '<%= yeoman.dist %>',
        src: [
          '.{ico,png,txt,xml}',
          '.htaccess',
          '.html',
          'views/{,/}.html',
          'images/{,/}.{webp}',
          'styles/fonts/{,/}.'
        ]
      }, {
        expand: true,
        cwd: '.tmp/images',
        dest: '<%= yeoman.dist %>/images',
        src: ['generated/']
      }, {
        expand: true,
        cwd: '../platforms/ios/www',
        dest: '<%= yeoman.dist %>/scripts',
        src: [
        'plugins/*',
        'cordova.js',
        'cordova_plugins.js'
        ]
      }]
    },
    styles: {
      expand: true,
      cwd: '<%= yeoman.app %>/styles',
      dest: '.tmp/styles/',
      src: '{,/}*.css'
    }
  },
  
  // Empties folders to start fresh
  clean: {
    dist: {
      files: [{
        dot: true,
        src: [
          '.tmp',
          '<%= yeoman.dist %>/{,/}',
          '!<%= yeoman.dist %>/.git{,/}'
        ]
      }]
    },
    server: '.tmp',
    options: {
      force: true
    }
  },</pre>4，修改index.html，在angular的引用之前添加對cordova.js的引用
  
  <script type="text/javascript" src="scripts/cordova.js"></script>
  5，在命令行運行grunt build，打包整個Web APP項目，然后拷貝yo/dist下所有文件到Hybrid APP項目的www目錄下
  
  $ grunt build
  6，來到Hybrid APP項目的根目錄，在命令行運行cordova prepare
  
  $ cordova prepare
  7，用Xcode打開Hybrid APP項目，運行iOS模擬器，可以看到Web APP已經成功的在iOS上運行了。
  
  
  
  
  
  步驟5，6在每次將Web APP部署到iOS上調試時都要做，純屬重復的手工操作，我寫了一段shell腳本來運行
  
  echo '### Sync APP to Platforms ###'
  
  echo 'Building web APP...'
  echo 'Please be patient, it may take several minutes'
  grunt build
  sourceDir="dist"
  targetDir="../www"
  allFiles="/*"
  if [ -d $sourceDir ]
  then
      if [ ! -d $targetDir ]
      then
          mkdir -p $targetDir
      fi
      echo 'Copying source files to www/'
      cp -r $sourceDir$allFiles $targetDir
  
  echo 'Calling cordova prepare'
  cd ..
  cordova prepare
  echo 'All done'
  
  else
      echo 'Err: The source directory "dist" doesnot exist, use command "grunt build" to generate it firstly'
  fi</pre> 
  
  
  
  但想要開發高效率的應用，公認還是做原生開發更好，iOS原生應用開發入門教程推薦王寒的編纂的《從零開始學iOS7開發系列》，教程寫的非常生動易懂，文章里的例子也很有代表性，仔細學習和琢磨之后可以舉一反三開發自己的應用。其實Hybrid APP開發早已經不限于移動平臺了，我最早接觸到的Hybrid APP是家用主機平臺，在XBOX ONE上，微軟也實現了供JavaScript調用的XBOX系統API，將Web APP通過Visual Studio打包后發布到主機上就可以運行。既然HTML5和CSS3在制作用戶界面上巨大的潛力，采用Hybrid APP方式確實可以極大的幫助Web開發人員開發瀏覽器平臺以外的應用。 
  

• Web App with dream team; AngularJS, Cordova, Yeoman & Topcoat
• Combining Yeoman, AngularJS, and Cordova for Mobile Development
• 維基百科——PhoneGap(Cordova)
• 【grunt整合版】30分鐘學會使用grunt打包前端代碼

來自：http://my.oschina.net/zombiecat/blog/470435