如何采用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

参考：