All geek questions in one place

Ionic Framework + Phonegap Build: Workflow

I am trying to compile my Ionic application using the Phonegap assembly (I work with a Mac, so I cannot compile iOS otherwise).

What is the best workflow?

thanks

+5
source share
5 answers

After fighting her all night and all morning I came up with a hacker solution.
Hope this helps someone.

Like ion v1.0, at least for my simplified project, the biggest difference is just

  • config.xml
  • all image objects are in. / resources

What I've done:
config.xml changes:

  • created a new file in .www / config_phonegap.xml based on config.xml
  • In the node widgets, the namespace has changed to phonegap (xmlns: gap = "http://phonegap.com/ns/1.0")
  • regex search is used to change all icons and splash tags to the corresponding equivalent of a phone saver
  • manually created the necessary "gap: plugin" tags for any plugins

gulp add:

  • created a gulp task to copy .www / to a folder. / phonegap
  • gulp task also copies resources
  • gulp task cheats on config_phonegap.xml and renames it as config.xml
  • gulp The challenge is to pin our new www folder. (in the zip file there should not be a single top level www, i.e. we only want the zip content of www)

This means that my build workflow (so far I don't need to change anything in the config.xml file) now looks like this:

Obviously, there are many opportunities for improvement, but I need something that I can use to publish now. Before just creating a static config_phonegap.xml file, I looked at a few ideas like XML parsing in JS or creating an XSLT file. In order to make an effort, at this moment it seemed to me that this was a low income, so I did not trace.

Here are the relevant code bits for reference.
Regex:

 ### 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" />

sample phonegap compatible 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 tasks:

 // **** 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)); })
+5
source

This is my own attempt to answer this (please help me update this so that everyone can win):

Build an app using Ionic:

 ionic start myApp sidemenu etc...

In the Ionic app, by default, the config.xml file is located in the root directory above the www/ folder, so move it to the www/ folder to build Phonegap to find it.

 mv config.xml www/

Then zip www/ or git push folder from the local computer to the remote git repository associated with PhoneGap Build. Just zip or click this directory, because if you allow other directories located in the Ionic root directory, such as node_modules, your application will be too large to compile into Phonegap Build.

Then compile on Phonegap Build.

+2
source
Message

w - was useful, but I really didn’t need many steps for my task. Also, my config.xml seems to work fine with PhoneGap Build. So this single gulp task will close www and config.xml in the .zip file:

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

If you want to automatically generate a configuration file for building PhoneGap, use this:

 npm install pgb-config-maker --save ./make-config-xml.sh

Next command:

 phonegap remote build ios
0
source

You can do this with the Ionic Package. They offer 100 assemblies / month.

Documents for this are available here: http://docs.ionic.io/services/package/#summary

If you need to send it to iTunes Connect, you can use this: https://software.intel.com/en-us/forums/intel-xdk/topic/670364#comment-1895468

0
source

Source: https://habr.com/ru/post/1216674/

More articles:


All Articles