如何採用Yeoman + Grunt + Bower開發基於PhoneGap的Hybrid APP

時間 2019-11-05

標籤如何採用 yeoman grunt bower 開發基於 phonegap hybrid app 欄目 Google 简体版

原文原文鏈接

一直想開發手機應用，也跟着教程學作了兩個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的界面，就表示成功運行。

建立其餘平臺的流程應該也是相似的，具體操做建議參考官方文檔。
怎樣加入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
  }
},
```
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
```
但想要開發高效率的應用，公認仍是作原生開發更好，iOS原生應用開發入門教程推薦王寒的編纂的《從零開始學iOS7開發系列》，教程寫的很是生動易懂，文章裏的例子也頗有表明性，仔細學習和琢磨以後能夠觸類旁通開發本身的應用。其實Hybrid APP開發早已經不限於移動平臺了，我最先接觸到的Hybrid APP是家用主機平臺，在XBOX ONE上，微軟也實現了供JavaScript調用的XBOX系統API，將Web APP經過Visual Studio打包後發佈到主機上就能夠運行。既然HTML5和CSS3在製做用戶界面上巨大的潛力，採用Hybrid APP方式確實能夠極大的幫助Web開發人員開發瀏覽器平臺之外的應用。 javascript