Ionic v1 use webpack instead of gulp - ionic-framework

I have 2 questions:
Can I use webpack instead of gulp while running "ionic serve"
Can I use webpack instead of gulp while running "ionic build android" ?
Currently the configurations are under:
ionic.project file with the properties: "gulpStartupTasks" and "watchPatterns"

like a ionic team member said on the ionic forum: "it would require changing how the core of the CLI works".
So it's not recommended.
But what you can do is build your app with a dedicated npm webpack script, then run "ionic serve" to test your app in development mode.
About the android build, you can run it with the --no-build option, to skip the core gulp build tasks :
ionic cordova run android --no-build
I made a boilerplate available on github, if you wanna give a try.

Related

How to make a prod build in "Ionic upload" command?

I want to use Ionic deploy service in Ionic cloud.
When I run ionic upload command, a dev build is immediately triggered instead of prod build.
Is it possible to create a --prod build and upload?
One of major reasons is that multiple configurations in my code are bundled with --prod build only.
ionic upload --deploy=dev
[INFO] Running app-scripts build:
[09:55:59] build dev started ...
[09:55:59] clean started ...
[09:55:59] clean finished in 1 ms
You could pipe the npm scripts to run the ionic --prod first and then ionic upload
"scripts":{
"custom-upload":"ionic cordova build --prod | ionic upload"
}
and then run in the terminal
$: npm custom-upload
This will still run the dev build i think but your prod build should be packaged as well. It does not look like you can specify a build type in the ionic upload command, which makes me think that the ionic upload does not upload the production build to ionic view. And if that is that case then you might want to consider changing the configurations setup in a prod build to be set to only be used if not on localhost instead on based on the build.

Gulp `serve:before` tasks not running in Ionic CLI v 3

Gulp serve:before tasks are not running in the Ionic CLI v3. They used to run well in Ionic CLI 2 and Ionic CLI 1.
gulp.task('serve:before', ['watch']);
This is the task. My app uses Ionic 1 and I did the necessary configurations and it is running well on Ionic CLI 3 upon ionic serve but not the gulp task serve:before is not running.
I believe you can update your code from:
gulp.task('serve:before', ['watch'])
to
gulp.task('ionic:watch:before', ['watch'])
If you install the ionic gulp plugin here.
My task also had a 'default' task, which can just be included alongside the watch task as before, so mine currently looks like this:
gulp.task('ionic:watch:before', ['default', 'watch'])
The weird thing is that it does not show any of the code being compiled on startup as it used to, but it does seem to actually do this.
=======================================
Update for ionic CLI 4
I had to update the task name to the following in ionic cli 4:
gulp.task('ionic:serve:before', ['default', 'watch'])

Tasks for production prepared Ionic app

I'm trying to figure out what's the best process to pass from the code to the final deployable apk/ipa.
So far I have a testsuite using Karma + Jasmine, which transpiles the TypeScript to JS and runs some unit tests. I start that process via gulp.
After that all I know is to ionic build android --release what generates (an unsigned yet) apk.
But I'm not sure of how ofuscated/minificated the generated apk is.
So, keeping in mind the code has to be as private as possible, is the minification and the ofuscation of the ionic build enough or should I do all those prebuild tasks manually via gulp?
And in that case, whats are the right tasks I should run, do I have to transpile all the TypeScript files to JS manually? and in what order should I run the tasks?
E.g. transpile -> tests -> minify -> uglify -> build apk or minify -> uglify -> transpile -> tests -> build apk
I'm a bit lost with this, and the only thing I can figure out is that the tests should be ran first, because is case of test failure the process should be aborted.
Try ionic-app-scripts >= 0.0.48 to config build.
Production:
ionic build android --prod
To check the minified file, open the apk file with GNOME Archive Manager (or similiar) and extract /assets/www/build/js/app.bundle.js file.
Preparing an Ionic Cordova app for release in production
1. Building
In your terminal execute the following command according to your platform (android / ios):
ionic build android --prod --release
2. Releasing
In order to be able to install a production application on a device and furthermore in order to be able to publish it in app stores, your .apk or .ipa
file needs to be signed. How you do that depends on the platform.
Here is the procedure in detail for Android and for iOS.
Preparing an Ionic Progressive Web App (PWA) for release in production
1. Building
In your package.json file, you should make sure to have something like the following:
"scripts": {
// ...
"build:www": "rm -rf www && ionic-app-scripts build --prod",
// ...
},
Now in your terminal run:
npm run build:www
2. Releasing
Your app is built in the folder www ready for you to serve in production using any webserver like NginX, Apache or a custom Node + Express webserver.
Valid as of Ionic v3.3
Learn more about ionic-scripts, what they do and which other scripts you could possibly find useful.

Ionic2 Build folder structure missing

I'm starting to learn Ionic2, I have created a new project with ionic start myproject --v2 and everything works correctly if I do ionic serve.
The build folder is missing in ionic 2 project folder.
Whenever I am trying to download any existing Ionic2 template in that one also build folder missing.
ionic -v 2.0.0-beta.30
cordova -v 6.2.0
node -v v6.2.1
npm -v 3.9.5
your ionic serve build is under www. The native builds ( from ionic build) are under platform.
A little late but I had the same issue and was able to fix it by installing Gulp :
npm install -g gulp
Then I did gulp build.
This solved my issues and generated the build folder as it was supposed to.
First you need to add support for the platform/s you are working with, by executing from Ionic CLI console:
ionic platform add android
or
ionic platform add ios
And then you should build your project by executing:
ionic build android
or
ionic build ios

How to specify ionic build folder in CLI

I have a ionic app and to build the project in android I use the command
ionic build android
It works fine and i'm able to build the project.
However if I want to specify an external folder in the path like...
ionic d:\Projects\mobile build android
How can I achieve this ?
You can do this. If you have an ionic:build npm script defined it will call that to do the build.
"scripts":{
"ionic:build": "ionic-app-scripts build android --release --prod --wwwDir www --buildDir build"
}
For achieving your goal there is one more way. Instead of passing the path in the ionic commands ( Which is not a valid command ), you can first reach to the path where you want to build ionic application using cd command.
In your case it would be first go to d drive by using
d:
then
cd \Projects\mobile.
After this you can run command
ionic build android