Preparing Sencha Touch Apps for Production
During development, I, or perhaps most if not everyone will point the Sencha Touch SDK in the Sencha Touch folder, and the index.html usually looks like this (I don’t usually debug CSS):
<html lang="en">
<head>
<title>Movie Mango</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src=../sencha-touch-2/sencha-touch-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" type="text/css" href="../sencha-touch-2/resources/css/mango.css" />
</head>
<body>
</body>
</html>
In this setup, I pointing the Sencha Touch js file in the Sencha Touch SDK folder and also the CSS file I created for my own theming there. If I wanted to deploy this app on server, I can’t just copy the sencha-touch-debug.js out or sencha-touch-all.js out and update my index.html to point to that, it should be minified and optimized. Those brilliant guys in Sencha provided us with the neat little tool Sencha SDK Tools, that help us compile every classes that we need and, yes, basically everything that we need (by just going through our code, brilliant!) and put them all in one single minified JavaScript file, and that is what we need for deployment.
Read more ... →