How to package (minify) an extjs 4 application

Question

I am looking for de facto instructions for packaging and minfying an Ext JS 4 app.

Everything seems to point to the Sencha SDK, but everything around this is targeted at Sencha Touch, and anyway, when I follow the instructions (sencha app build testing) I receive:

"The current working directory (C:...) is not a recognized Sencha SDK or application folder"

Which throws me, since the structure I am using was generated by Sencha Architect. Looking at the docs here, the folder structure generated by Architect is correct but some of the file names are different. And there seems to be some packaging files (app.json packager.json) that I have no idea about.

I'd expect loads of posts/guides/blogs/articles on this what you'd think would be a common requirement given the shed load of .js files one creates whilst developing.

Answer 1

This post is much out-dated. We need to be using Sencha Cmd.

• http://docs.sencha.com/extjs/4.2.1/#!/guide/command
• http://www.sencha.com/blog/all-new-sencha-cmd

Download: http://www.sencha.com/products/sencha-cmd/download

A great thing once you've stepped over the short learning curve.

Its as simple as running sencha app build, which creates YUI compressed javascript and stylesheet files, with clever processing to ensure only what you app needs is included - further reducing the size.

Answer 2

I was able to get our application production ready with help from this article.

Answer 3

I was not happy about using Sencha.Cmd. It's huge, hard to setup, usually breaks on trivial errors.

Also I was trying to use Nicholas Zakas's JS Combiner but I had always to track dependencies and accurately write them in comment commands. Even though ExtJS classes were frequently messed up in the output build file.

Then I decided to write light-weight build tool for ExtJS applications on my own. Here it is:

Extapp - https://github.com/liberborn/extapp.

No need to add additional comments. It "understands" native ext classes definitions. The default config file is quite enough to count on all dependency types which ExtJS is using.

Please feel free to use.

Usage: java -jar extapp-yyyy.mm.jar [options] [base path] [config file] [source file] [output file]

It can be included both to ant and gradle deployment scripts.

Extapp tool is working with ExtJS 5 too. Probably it is working also with Sencha Touch but I did not have a chance to test it.