Sencha Cmd supports the concept of environments to allow different behavior depending on the stage of your workflow. We've already mentioned that Sencha Cmd leverages the power of the Ant build system to allow customization of the process. The different environments simply define variables that are consumed by Ant and passed into the build process to enable, disable, or amend a part of the build.
You can see the default build variables by running the following command:
sencha ant .props
This produces something that includes the following code along with a million and one other variables:
[INF] [echoproperties] app.output.js=app.js [INF] [echoproperties] app.output.js.compress=false [INF] [echoproperties] app.output.js.enable=true [INF] [echoproperties] app.output.js.optimize=false
Here the variable app.output.js has the value app.js.
Note
Note that build variables and configuration variables are two separate things. Configuration variables are used by Sencha Cmd as a whole, not just the build process. We'll only be discussing configuration variables, as they're most commonly used and provide the most "bang for your buck". We just don't have space to cover every variable.
We're going to take a closer look at environments now. They are used with the app build subcommand and give us a lot of power to customize our code for production.
When creating a production build, we want to make our code as lean as possible, removing logging, debugging, and making sure that we compress JavaScript and CSS and use all optimizations available. Let's look at the overrides for the product environment:
// Defined in .sencha/app/production.defaults.properties build.options.logger=no build.options.debug=false build.compression.yui=1 build.optimize=true enable.cache.manifest=true enable.resource.compression=true build.embedded.microloader.compressor=-closure
Let's look at each option in turn, ignoring the comment on the first line:
- Disable Ext JS framework logging.
- Tell the compiler to remove code designated as debug code.
- Use the YUI Compressor to minify the JavaScript code.
- Enable custom optimizations (such as removing the
requiresoption) that are no longer needed when the dependency tree is already known. This can result in a slightly smaller code base. - Generate an HTML cache manifest file. This instructs the browser to cache the application's
index.htmlfile to reduce network activity. - Compress the CSS files and other resources.
- Compress the "microloader" JavaScript that boots our application.
Along with the huge range of other configuration options, we have a mechanism to tailor our final build to suit our needs. For tracking production issues, you may wish to enable logging to the browser console, so you can toggle this option.
You could even create a custom environment that skips parts of the build for a quicker process. It's worth poring through the output that sencha ant .props creates in order to see where you can tailor the process for the needs of your team.