If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

The apps to be released (apk|ipa|xap) are minified during the build process.

Appery.io uses  Grunt JS Task Runner for minifying code in its projects.

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality but reducing the released app. Such unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

During the minification process, functions and variables get renamed and code fragments are modified (obfuscated). Mostly, such modifications lead to securing and reducing the code but some problems may arise calling for changing minification settings.

Managing AngularJS apps minification

Minification can be user-managed and all the settings are found under the Source tab: WEB_RESOURCES > test > Gruntfile.js:GruntJSFile

The default settings use requirejs (https://github.com/gruntjs/grunt-contrib-requirejs).

When the app starts, all the files connected to it are combined into a single app.js file which is minified:AppJSFile

If any of your files (libs or custom JS) returns an error during minification, you can repair the code or update the minification settings to avoid further errors making changes to the minification settings, adding the errorneus files to the ignore list, or disabling minification.

Let’s have a look at some examples.

Changing minification settings

If you have added some library and want to delete the extra files when building a release app, you may define the path to the files to be deleted in the src array of the clean:unused task:unused

Disabling minification

To fully disable minification, delete the following tasks from the default tasks list:

  • requirejs:compile
  • copy:restoreAngular
  • copy:copyPlugins
  • clean:plugins
  • replace:buildindex

DefaultTasks

Besides, you must correct  the copy:tmpApp task, changing the destination folder for copying: build/www in place of temp_app/www:build.www

Adding custom modules

You can also add a third-party grunt module to be used for minification (for example, image minification module). To do this, create a node_modules folder and upload the needed grunt module to this folder. In cases the module is very bulky (and the Builder notifies on upload error), you can split the folder into several .zip files and upload them separately.

Then, you can add  this module to Gruntfile.js – grunt.loadNpmTasks('module-name');, create the task and then add this task to the default tasks array.

Mind, that minifying the JavaScript code for PhoneListCtrl controller brings about the problem of  correct services identification.  You can check here to learn how to overcome the problem.

More details on how to define the minification settings can be found here and here.