Sencha Touch build - exclude files

Question

In my Sencha application I have a Config.js file containing some service URLs:

Ext.define('MyApp.utils.Config', {
    singleton : true,

    config : {
        authBaseUrl : '...',
        serviceBaseUrl : '...',
        reportsBaseUrl : '...',
        imagesUrl : '...'
    },    

    constructor : function (config) {
        this.initConfig(config);
    }
});

Before deployment I use the

sencha app build

command from the Sencha Touch SDK to minify and concatenate files etc.

My problem is that the build process will also add config.js to the minified app.js file, although it would be very useful if I could edit it without the need of rebuilding / redeploying the whole application. I haven't found any means to change the behaviour of the build process.

So after building the application I would like to have these three js files:

sdk/sencha-touch.js (concatenated, minified, cached in localstorage after the first download)
app.js (concatenated, minified, cached in localstorage after the first download)
config.js (left untouched, without caching it in the localstorage)

zelexir zelexir · Accepted Answer · 2012-09-17T20:24:18

Break it out from the app so that it isn't bundled, then put a reference to it in app.json, this has worked well for me in similar cases.

I also have a config.js that is repeatedly modified during my development, so in my app.json it would look like this:

"js": [
    {
        "path": "sdk/sencha-touch-all.js"
    },
    {
        "path": "config.js"
    },
    {
        "path": "app.js",
        "bundle": true, 
        "update": "full"
    }
],

This makes sure that your config.js file is included in the build.

Then you need to add the script to your app.html file, just make sure that it is loaded before your main app.js. Mine looks like this (autogenerated from Sencha Architect):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>llm</title>
    <link rel="stylesheet" href="resources/css/llm.css">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="sdk/sencha-touch-all.js"></script>
    <script src="config.js"></script>
    <script src="cordova-2.0.0.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

Hope that this helps you!

Sencha Touch build - exclude files

1 Answers