Build Automation for React-Ionic-Capacitor App using Gulp

Hi Everyone, in this article we are going to automate build process of a React-Ionic-Capacitor app using Gulp.

If you would like to know how to create a mobile app with React/Ionic/Capacitor combo feel free to visit my previous article How to Make a Mobile App with React, Ionic and Capacitor

I am going to use the same app codebase from above link for this tutorial. Initially my application look like below :

As the first step I am going add few dependencies for this process (1) Gulp (2) Child_process

I am also installing gulp as global

Now we are going to create a file gulpfile.js in the root folder of the project.

Below commands we are going to execute one by one by creating gulp task for each:

1. npm run build : to build the project
2. npm cap sync : to sync project with native code
3. gradlew clean : to clean gradle
4. gradlew assembleDebug : to create debug build
5. gradlew assembleRelease : to create release

After those we will create a final gulp task "AutomateBuild" to run then all in sequence. So lets create one by one.

First import gulp and child_process in gulpfile.js

const gulp = require('gulp') 
const exec = require('child_process').exec 

npm run build :: task

gulp.task('buildApp',function (cb) {      
    exec('npm run build',function (err,stdout,stderr) {
        console.log(stderr)         
        console.log(stdout)         
        cb(err)     
    }) 
}) 

npm cap sync :: task

gulp.task('performSync',function (cb) {      
    exec('npx cap sync',function (err,stdout,stderr) {          
        console.log(stderr)         
        console.log(stdout)         
        cb(err)     
    })
}) 

gradlew clean :: task

gulp.task('cleanGradle',function (cb) {      
    exec('./gradlew clean',{cwd:'android/',stdio:'inherit'},function (err,stdout,stderr) {
        console.log(stderr)         
        console.log(stdout)         
        cb(err)     
    }) 
}) 

gradlew assembleDebug :: task

gulp.task('debugBuild',function (cb) {      
    exec('./gradlew assembleDebug',{cwd:'android/',stdio:'inherit'},function (err,stdout,stderr) {
        console.log(stderr)         
        console.log(stdout)         
        cb(err)     
    }) 
}) 

gradlew assembleRelease :: task

gulp.task('releaseBuild',function (cb) {      
    exec('./gradlew assembleRelease',{cwd:'android/',stdio:'inherit'},function (err,stdout,stderr) {
        console.log(stderr)         
        console.log(stdout)         
        cb(err)     
    }) 
}) 

AutomateBuild :: task

gulp.task('AutomateBuild',gulp.series('buildApp','performSync','cleanGradle','debugBuild','releaseBuild',function (done) {
    done() 
}))

All tasks completed, now we will run the command "gulp AutomateBuild" , which will start tasks one by one

npm run build :: task executing

npm cap sync :: task executing

gradlew clean :: task executing

gradlew assembleDebug :: task executing

gradlew assembleRelease :: task executing

You will find your created apk files under :

Android/app/build/outputs/apk/debug/app-debug.apk and Android/app/build/outputs/apk/release/app-release.apk path

Proceed to : Automate Android APK Signing using Gulp for React Capacitor App (KeyStore, JarSigner, KeyTool)

Thank you for your time ... :)