Ionic Framework + Phonegap Build:工作流程

时间:2015-04-02 08:27:57

标签: cordova phonegap-build ionic hybrid-mobile-app

我正在尝试使用Phonegap Build编译我的Ionic应用程序(我正在使用Mac,所以我无法编译到iOS)。

什么是最好的工作流程?

由于

5 个答案:

答案 0 :(得分:5)

整夜和整个上午的战斗结束后,我想出了一个黑客的解决方案 希望它可以帮助某人。

至于离子v1.0,至少在我的简单项目中,最大的区别只是

  • config.xml中
  • 所有图片资源都在./resources

我做了什么:
config.xml更改:

  • 在.www / config_phonegap.xml中基于config.xml
  • 创建了一个新文件
  • 在widget节点上将命名空间更改为phonegap(xmlns:gap =“http://phonegap.com/ns/1.0”)
  • 使用正则表达式搜索替换将所有图标和启动标记更改为相应的等效手机屏幕
  • 为任何插件手动创建必要的“gap:plugin”标记

gulp添加:

  • 创建了一个gulp任务,将.www /转换为./phonegap文件夹
  • gulp任务也复制资源
  • gulp task coipies over config_phonegap.xml并将其重命名为config.xml
  • gulp任务压缩我们的新www文件夹。 (zip文件中应该没有顶级www。即我们只想压缩www的内容)

这意味着我的构建工作流程(直到我需要在config.xml中更改内容)现在看起来像这样:

  1. gulp phonegap
  2. 将phonegap.zip上传到https://build.phonegap.com
  3. 显然这里有很多需要改进的地方,但我现在需要用来发布的东西。在创建静态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));
    })
    

答案 1 :(得分:2)

这是我自己尝试回答这个问题(请帮我更新一下,这样每个人都可以受益):

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

ionic start myApp sidemenu
etc...

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

mv config.xml www/

然后zip www/文件夹或git push从本地计算机到您与Phonegap Build链接的远程git仓库。只压缩或推送这个目录,因为如果让其他目录出现在Ionic根目录中,比如node_modules,你的应用程序将太大而无法在Phonegap Build上编译。

然后在Phonegap Build上编译。

答案 2 :(得分: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/'));
});

答案 3 :(得分:0)

如果要自动生成PhoneGap构建的配置文件,请使用:

npm install pgb-config-maker --save

./make-config-xml.sh

下一个命令:

phonegap remote build ios

答案 4 :(得分: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