Ionic框架+Phonegap Build：工作流程

Question

Ionic框架+Phonegap Build：工作流程

cordovaphonegap-buildionic-frameworkhybrid-mobile-app

6

我正在尝试使用Phonegap Build编译我的Ionic应用（因为我是在Mac上工作，否则无法编译为iOS）。

最佳的工作流程是什么？

谢谢。

- Louis

我无法相信这个问题没有得到足够的关注。 - w--

5个回答

2

这是我自己尝试回答的（请帮助我更新，以便每个人都可以受益）：

使用Ionic构建您的应用程序：

ionic start myApp sidemenu
etc...

在默认的Ionic应用中，config.xml文件位于根目录中的www/文件夹上方。因此，将其移动到www/文件夹中以便于Phonegap Build找到它。

mv config.xml www/

然后将“www/”文件夹压缩或从本地计算机通过git push推送到您与Phonegap Build链接的远程git repo。只压缩或推送此目录，因为如果您让Ionic根目录中存在的其他目录（如node_modules）存在，您的应用将太大而无法在Phonegap Build上编译。

然后在Phonegap Build上进行编译。

- Louis

0

如果您想自动生成PhoneGap构建的配置文件，请使用以下代码：

npm install pgb-config-maker --save

./make-config-xml.sh

下一个命令：

phonegap remote build ios

- siddiq

0

你可以使用Ionic Package来完成。他们提供每月100个构建。

相关文档在这里：http://docs.ionic.io/services/package/#summary

如果你需要将其发送到Itunes Connect，可以使用这个：https://software.intel.com/en-us/forums/intel-xdk/topic/670364#comment-1895468

- José Nicodemos Maia Neto

0

w--的帖子很有帮助，但我并不需要那么多步骤来完成我的任务。此外，我的config.xml似乎在PhoneGap Build上正常工作。因此，这个单一的gulp任务将把www和config.xml压缩到一个.zip文件中：

gulp.task('phonegap_zip', function(){
  return gulp.src(['./www/**', './config.xml'])
        .pipe(zip('phonegap.zip'))

        .pipe(gulp.dest('./phonegap/'));
});

- Arlo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- w-- · Accepted Answer

在整夜和整个早晨的奋斗后，我想到了一个hackish解决方案。
希望它能帮助别人。在ionic v1.0中，至少对于我这个简单项目来说，最大的区别只有 config.xml和所有图像资源都在./resources中。

我做了以下事情：
config.xml更改：

在.config_phonegap.xml中创建了一个新文件，基于config.xml

在widget节点上将命名空间更改为phonegap(xlmns:gap="http://phonegap.com/ns/1.0")

使用正则表达式搜索替换将所有icon和splash标签更改为相应的phonegap等效标签

手动创建了任何插件所需的“gap:plugin”标记

gulp添加：

创建了一个gulp任务将.www/复制到一个./phonegap文件夹中
gulp任务还复制资源
gulp任务复制config_phonegap.xml并将其重命名为config.xml
gulp任务压缩我们的新www文件夹。(zip文件中不应包含顶层www。即我们只想压缩www的内容)

这意味着我的构建工作流程(直到我需要在config.xml中更改某些东西)现在看起来像这样：

gulp phonegap
上传phonegap.zip到https://build.phonegap.com

显然，在这里有许多改进的空间，但我需要一些我现在可以用来发布的东西。之前我只是制作了一个静态的config_phonegap.xml，我探索了一些想法，比如在JS中解析XML或制作XSLT文件。因为花费的精力太大，回报似乎很低，所以没有继续下去。

以下是相关的代码片段
正则表达式：

### icon regex
# android
<icon src="([\.\w\\-]+)" density="([\w-]+)"/>
<icon src="$1" gap:platform="android" gap:qualifier="$2"/>

# ios
<icon src="([@\.\w\\-]+)" width="([\d]+)" height="([\d]+)"/>
<icon src="$1" gap:platform="ios" width="$2" height="$3" />


### splash regex
# android
<splash src="([\.\w\\-]+)" density="([\w-]+)"/>
<gap:splash src="$1" gap:platform="android" gap:qualifier="$2" />

#ios
<splash src="([~@\.\w\\-]+)" width="([\d]+)" height="([\d]+)"/>
<gap:splash src="$1" gap:platform="ios" width="$2" height="$3" />

示例PhoneGap兼容的config.xml：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.yadda.yadda" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <name>my app name</name>
  <description>
        la di da desc
  </description>
  <author email="blah@diblah.com" href="https://harhar.com/">w--</author>

  <content src="index.html"/>
  <access origin="*"/>

  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="1500"/>

  <icon src="resources/android/icon/drawable-ldpi-icon.png" gap:platform="android" gap:qualifier="ldpi"/>
  <icon src="resources/android/icon/drawable-mdpi-icon.png" gap:platform="android" gap:qualifier="mdpi"/>
  <icon src="resources/android/icon/drawable-hdpi-icon.png" gap:platform="android" gap:qualifier="hdpi"/>
  <icon src="resources/android/icon/drawable-xhdpi-icon.png" gap:platform="android" gap:qualifier="xhdpi"/>
  <icon src="resources/android/icon/drawable-xxhdpi-icon.png" gap:platform="android" gap:qualifier="xxhdpi"/>
  <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" gap:platform="android" gap:qualifier="xxxhdpi"/>
  <gap:splash src="resources/android/splash/drawable-land-ldpi-screen.png" gap:platform="android" gap:qualifier="land-ldpi" />
  <gap:splash src="resources/android/splash/drawable-land-mdpi-screen.png" gap:platform="android" gap:qualifier="land-mdpi" />
  <gap:splash src="resources/android/splash/drawable-land-hdpi-screen.png" gap:platform="android" gap:qualifier="land-hdpi" />
  <gap:splash src="resources/android/splash/drawable-land-xhdpi-screen.png" gap:platform="android" gap:qualifier="land-xhdpi" />
  <gap:splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" gap:platform="android" gap:qualifier="land-xxhdpi" />
  <gap:splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" gap:platform="android" gap:qualifier="land-xxxhdpi" />
  <gap:splash src="resources/android/splash/drawable-port-ldpi-screen.png" gap:platform="android" gap:qualifier="port-ldpi" />
  <gap:splash src="resources/android/splash/drawable-port-mdpi-screen.png" gap:platform="android" gap:qualifier="port-mdpi" />
  <gap:splash src="resources/android/splash/drawable-port-hdpi-screen.png" gap:platform="android" gap:qualifier="port-hdpi" />
  <gap:splash src="resources/android/splash/drawable-port-xhdpi-screen.png" gap:platform="android" gap:qualifier="port-xhdpi" />
  <gap:splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" gap:platform="android" gap:qualifier="port-xxhdpi" />
  <gap:splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" gap:platform="android" gap:qualifier="port-xxxhdpi" />

  <icon src="resources/ios/icon/icon.png" gap:platform="ios" width="57" height="57" />
  <icon src="resources/ios/icon/icon@2x.png" gap:platform="ios" width="114" height="114" />
  <icon src="resources/ios/icon/icon-40.png" gap:platform="ios" width="40" height="40" />
  <icon src="resources/ios/icon/icon-40@2x.png" gap:platform="ios" width="80" height="80" />
  <icon src="resources/ios/icon/icon-50.png" gap:platform="ios" width="50" height="50" />
  <icon src="resources/ios/icon/icon-50@2x.png" gap:platform="ios" width="100" height="100" />
  <icon src="resources/ios/icon/icon-60.png" gap:platform="ios" width="60" height="60" />
  <icon src="resources/ios/icon/icon-60@2x.png" gap:platform="ios" width="120" height="120" />
  <icon src="resources/ios/icon/icon-60@3x.png" gap:platform="ios" width="180" height="180" />
  <icon src="resources/ios/icon/icon-72.png" gap:platform="ios" width="72" height="72" />
  <icon src="resources/ios/icon/icon-72@2x.png" gap:platform="ios" width="144" height="144" />
  <icon src="resources/ios/icon/icon-76.png" gap:platform="ios" width="76" height="76" />
  <icon src="resources/ios/icon/icon-76@2x.png" gap:platform="ios" width="152" height="152" />
  <icon src="resources/ios/icon/icon-small.png" gap:platform="ios" width="29" height="29" />
  <icon src="resources/ios/icon/icon-small@2x.png" gap:platform="ios" width="58" height="58" />
  <icon src="resources/ios/icon/icon-small@3x.png" gap:platform="ios" width="87" height="87" />
  <gap:splash src="resources/ios/splash/Default-568h@2x~iphone.png" gap:platform="ios" width="640" height="1136" />
  <gap:splash src="resources/ios/splash/Default-667h.png" gap:platform="ios" width="750" height="1334" />
  <gap:splash src="resources/ios/splash/Default-736h.png" gap:platform="ios" width="1242" height="2208" />
  <gap:splash src="resources/ios/splash/Default-Landscape-736h.png" gap:platform="ios" width="2208" height="1242" />
  <gap:splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" gap:platform="ios" width="2048" height="1536" />
  <gap:splash src="resources/ios/splash/Default-Landscape~ipad.png" gap:platform="ios" width="1024" height="768" />
  <gap:splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" gap:platform="ios" width="1536" height="2048" />
  <gap:splash src="resources/ios/splash/Default-Portrait~ipad.png" gap:platform="ios" width="768" height="1024" />
  <gap:splash src="resources/ios/splash/Default@2x~iphone.png" gap:platform="ios" width="640" height="960" />
  <gap:splash src="resources/ios/splash/Default~iphone.png" gap:platform="ios" width="320" height="480" />

  <icon src="icon.png"/>
  <gap:splash src="splash.png" />

 <!-- so android doesnt' go bat shit crazy -->
  <preference name="permissions" value="none"/>

 <!-- plugins -->
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
 <gap:plugin name="cordova-plugin-statusbar" source="npm" version="1.0.0">
   <param name="onload" value="true" />
 </gap:plugin>
 <gap:plugin name="cordova-plugin-splashscreen" source="npm" version="2.0.0" />
</widget>

gulp任务：

// **** Build phonegap *****/
var PHONEGAP_BUILD_FOLDER = '../phonegap',
      PHONEGAP_RAW_FOLDER = 'www',
      IONIC_SOURCE_FOLDER = './www',
      IONIC_RESOURCE_FOLDER = './resources'
      PHONEGAP_ZIP_FILE = 'phonegap_build.zip';

gulp.task('phonegap', function(cb){
  runSequence('clean_phonegap',
              'copy_www',
              'copy_resources',
              'copy_phonegap_config_xml',
              'copy_default_icon',
              'copy_default_splash',
              'zip_phonegap',
              cb);
});

gulp.task('clean_phonegap', function(cb){
  // clean our folder first
  var phonegap_del_pattern = PHONEGAP_BUILD_FOLDER + '/*';
  del([phonegap_del_pattern], {force: true}, cb);
})

gulp.task('copy_www', function(){
  var target_phonegap_folder = PHONEGAP_BUILD_FOLDER + '/' + PHONEGAP_RAW_FOLDER
  return gulp.src([IONIC_SOURCE_FOLDER + '/**'])
              .on('error', swallowError)
              .pipe(gulp.dest(target_phonegap_folder))
})

gulp.task('copy_phonegap_config_xml', function(){
  var target_phonegap_folder = PHONEGAP_BUILD_FOLDER + '/' + PHONEGAP_RAW_FOLDER
  return gulp.src(['config_phonegap.xml'])
              .on('error', swallowError)
              .pipe(rename('config.xml'))
              .pipe(gulp.dest(target_phonegap_folder));
})

gulp.task('copy_resources', function(){
  var target_phonegap_folder = PHONEGAP_BUILD_FOLDER + '/' + PHONEGAP_RAW_FOLDER + '/resources',
      exclude_pattern = '!' + IONIC_RESOURCE_FOLDER + '/_source_assets{,/**}'

  // exclude pattern needs to go first. mother fucker.
  return gulp.src([exclude_pattern, IONIC_RESOURCE_FOLDER + '/**'])
              .on('error', swallowError)
              .pipe(gulp.dest(target_phonegap_folder));
})

gulp.task('copy_default_icon', function(){
  var target_phonegap_folder = PHONEGAP_BUILD_FOLDER + '/' + PHONEGAP_RAW_FOLDER;
  return gulp.src([IONIC_RESOURCE_FOLDER + '/ios/icon.png' ])
              .on('error', swallowError)
              .pipe(gulp.dest(target_phonegap_folder));
})

gulp.task('copy_default_splash', function(){
  var target_phonegap_folder = PHONEGAP_BUILD_FOLDER + '/' + PHONEGAP_RAW_FOLDER;
  return gulp.src([IONIC_RESOURCE_FOLDER + '/splash.png' ])
              .on('error', swallowError)
              .pipe(gulp.dest(target_phonegap_folder));
})


gulp.task('zip_phonegap', function(){
  var sourcephonegap_folder = PHONEGAP_BUILD_FOLDER + '/' + PHONEGAP_RAW_FOLDER
  return gulp.src(sourcephonegap_folder + '/**')
        .pipe(zip('phonegap.zip'))
        .on('error', swallowError)
        .pipe(gulp.dest(PHONEGAP_BUILD_FOLDER));
})