Last Updated: December 30, 2020
·
6.314K
· avgp

Use grunt to create a new build on build.phonegap.com

build.phonegap.com is nice

build.phonegap.com is awesome: You upload a ZIP or link a Git repository, upload or push the code to the website and get binaries for the different supported platforms in a short amount of time, without the need to install all the build toolchains yourself.

..but if you need preparations for your build...

However, if you want to go with something that requires preprocessing (e.g. non-HTML templates like Jade, SCSS or CoffeeScript) or your application has some preparation steps before building, using the repository is not an option. That means you have to do the preprocessing / build preparation, then ZIP the resulting contents and upload them by going to your browser, clicking "Update code", choosing the ZIP file and uploading it, which is a horrificly painful process.

...you better have a build tool like Grunt

If you have some preprocessing / preparation steps, you're likely to use some flavour of build tool. If you're using Grunt, this one is for you!

The grunt-phonegap-build plugin

If you already have grunt installed, you only need the plugin

$ npm install grunt-phonegap-build

Now that you have it, you need to have a step that creates the ZIP archive for upload. I use grunt-zipstream for this. In your Gruntfile.js you'll need to have a new task like this:

zip: {
  app: {
    file: {
      src: ["index.html", "js/**/*.js", "css/**/*.js", "icon.png", "images/background.jpg"],
      dest: "app.zip"
    }
 }  

When you now run grunt zip it should create an app.zip file. Try building that by uploading it to build.phonegap.com - if you haven't missed files or folders, you now automated the first part of the phonegap build process.
The second step is, to create the phonegap-build step with the phonegap-build plugin, by adding this to your Gruntfile.js:

"phonegap-build": {
  options: {
    archive: "app.zip",
    "appId": "YOUR_APP_ID",
    "user": {
      "email": "YOUR_EMAIL",
      "password": "YOUR_PASSWORD"
    }
  }
}

obviously, you need to replace YOURAPPID (you can see this in the application details on build.phonegap.com), YOUREMAIL (for your Adobe ID) and YOURPASSWORD (again, for your Adobe ID) with real values for your application and account.

Then running grunt phonegap-build will upload your application and trigger a new build.

2 Responses
Add your response

Do you know if any update in the build.phonegap.com or in the Grunt are causing a "false positive"? I made everything explained, the grunt runs without error but the build is not triggered.

over 1 year ago ·

The sample code for Gruntfile.js is missing a level:

"phonegap-build": {
main: {
options: {
archive: "app.zip",
"appId": "YOURAPPID",
"user": {
"email": "YOUREMAIL",
"password": "YOUR
PASSWORD"
}
}
}

}

Without "main" - the task will never actually trigger.

over 1 year ago ·