If you read our tutorial on the "easy caching", or if you have already developed web applications, I'm sure you are aware of the importance of minimizing the amount of data your webapp will have to load in order to improve its loading time and your user's experience. This step is called the "build". And by "building" your webapp you can actually "kill 2 birds with 1 stone": you will reduce the size of the code and reduce the number of HTTP request you'll have to make to fetch your content.
Note: remember that in a mobile context, with an EDGE connection for instance, it's usually better to make one HTTP request (due to the time of establishing the TCP connection), even if the data are a bit bigger, than 2 smaller requests. That's why you can sometimes see people advising you to inline some of your images into your CSS directly, even if encoding them in base64 adds a small overhead.
The "build" will minimize and concatenate your JS and CSS into single files. Almost every framework proposes it's own adapted build tool, and so does Wink. We know how builds can sometimes become complicated processes and that's why we wanted to have something simple, that people could set up in less than 5 minutes.
The build
The Wink build tool is a Rhino based application that can be used with ANT and it is situated in the "utils/build" folder. In the coming paragraphs I'll explain how you can use "build.xml", "build.properties" and "profiles.json" to create your custom build.
There are different open source libraries for minimizing JS and CSS. In Wink we decided to rely on "closure compiler" for minimizing our JS and "YUI Compressor" for the CSS part.
How things work ?
The "build.xml" file defines a default "build_wink" task that you will use to start the build process. It uses "build.properties" which contains the default build configuration and "conf/profiles.json", a JSON structure which describes all the resources you need in your webapp.
We will start with an easy example for "profiles.json" and we will deal with "build.properties" later (which only has to be modified for more complex configurations).
Example
Let's say that in your webapp you are using Wink core, a scroller, sliding panels and a carousel. So while you are still under development, your should have something like this:
The stylesheets (including the sliding panels and carousel stylesheets, plus the Wink default theme)
<link rel="stylesheet" href="../../../../_themes/wink.css" type="text/css"> <link rel="stylesheet" href="../../../../_themes/default/css/wink.default.css" type="text/css"> <link rel="stylesheet" href="../../../../_themes/default/css/wink.default.buttons.css" type="text/css"> <link rel="stylesheet" href="../../../../_themes/default/css/wink.default.icons.css" type="text/css"> <link rel="stylesheet" href="../../../../ui/xy/carousel/css/carousel.css" type="text/css"> <link rel="stylesheet" href="../../../../ui/layout/slidingpanels/css/slidingpanels.css" type="text/css">
The scripts (Wink core, the sliding panels, the carousel, and the scroller with its dependencies)
<script type="text/javascript" src="../../../../_amd/js/amd.js"></script> <script type="text/javascript" src="../../../../_base/_base/js/base.js"></script> <script type="text/javascript" src="../../../../_base/_dom/js/dom.js"></script> <script type="text/javascript" src="../../../../_base/error/js/error.js"></script> <script type="text/javascript" src="../../../../_base/json/js/json.js"></script> <script type="text/javascript" src="../../../../_base/ua/js/ua.js"></script> <script type="text/javascript" src="../../../../_base/topics/js/topics.js"></script> <script type="text/javascript" src="../../../../_base/_feat/js/feat.js"></script> <script type="text/javascript" src="../../../../_base/_feat/js/feat_json.js"></script> <script type="text/javascript" src="../../../../_base/_feat/js/feat_css.js"></script> <script type="text/javascript" src="../../../../_base/_feat/js/feat_event.js"></script> <script type="text/javascript" src="../../../../_base/_feat/js/feat_dom.js"></script> <script type="text/javascript" src="../../../../fx/_xy/js/2dfx.js"></script> <script type="text/javascript" src="../../../../math/_basics/js/basics.js"></script> <script type="text/javascript" src="../../../../net/xhr/js/xhr.js"></script> <script type="text/javascript" src="../../../../ui/xy/layer/js/layer.js"></script> <script type="text/javascript" src="../../../../ux/event/js/event.js"></script> <script type="text/javascript" src="../../../../ux/touch/js/touch.js"></script> <script type="text/javascript" src="../../../../ux/window/js/window.js"></script> <script type="text/javascript" src="../../../../ux/movementtracker/js/movementtracker.js"></script> <script type="text/javascript" src="../../../../ux/inertia/js/inertia.js"></script> <script type="text/javascript" src="../../../../ui/layout/scroller/js/scroller.js"></script> <script type="text/javascript" src="../../../../ui/xy/carousel/js/carousel.js"></script> <script type="text/javascript" src="../../../../ui/layout/slidingpanels/js/slidingpanels.js"></script>
As you can se, this is quite a lot (30 different resources to load) It would be better, now that you are at the last stage of your development, if you could go from 30 resources to just 2 resources to load...
Let's modify "conf/profiles.json" in order to have something that fits your needs. The default "profiles.json" look like this
{
"build": {
"jsFile": "wink-VERSION-PROFILE-TARGET.js",
"cssFile": "wink-VERSION-PROFILE-TARGET.css",
"version": "1.4.1",
"defaultLocaleList": [ "en_EN" ]
},
"profiles": [
{
"name": "all",
"modules": [
// CORE
"core",
// FEATURE EXTENDED
"featapi", "featgraphic",
// JSON
"jsonextended",
// API
"geolocation", "storage", "safaridb", "gearsdb",
// FX
"3dfx", "animation",
// MATH
"geometric", "matrix",
// NET
"cssloader", "imagesloader", "jsloader", "smartloader", "tracking",
// MULTIMEDIA
"audioplayer", "videoplayer", "mediawheel",
// UX
"history", "dnd", "gesture", "gesturerecognizer", "inertia", "movementtracker", "search", "window",
// UI
"accordion", "fixedlayout", "scroller", "slidingpanels", "tabcontainer", "modalwindow", "flippage", "windows", "input", "carousel",
"colorpicker", "datepicker", "menu", "newsticker", "popup", "progressbar", "slideshow", "spinner", "cspinner", "trace",
"togglebutton", "wall", "coverflow", "cube", "flipdisc", "opener", "tagcloud",
// PLUGINS
"asyncpanels", "sharingwheel", "scrolltorefresh", "scrolltoload"
],
"css": [
"_themes/wink.css",
"_themes/default/css/wink.default.css",
"_themes/default/css/wink.default.buttons.css",
"_themes/default/css/wink.default.icons.css"
]
},
{
"name": "core",
"modules": [
"core"
],
"css": [
"_themes/wink.css",
"_themes/default/css/wink.default.css",
"_themes/default/css/wink.default.buttons.css",
"_themes/default/css/wink.default.icons.css"
]
},
{
"name": "easycaching",
"modules": [
"cache"
]
}
]
}
"build.jsFile" and "build.cssFile" specify the name of the outputed files. "build.defaultLocaleList" specifies which locales should be included into the minified JS. For instance, if you want an english only webapp, you can let the file as it is but if you want an english/french webapp, you should change it to [ "en_EN", "fr_FR" ]. If you do so, both locales will be included in the JS ouput.
Now, let's build our profile ! I remind you that we need Wink core, the carousel, the sliding panels and the scroller. First we will give our profile a name ; for instance "test". Then we will declare the right modules. There should be "core", "carousel", "slidingpanels" and "scroller". As you may remember, "scroller" also has some dependencies like "inertia", "movementtracker", "window" so we will put them too.
We also want to include the default Wink theme. What about the components styles like "carousel.css" ? Don't worry, since we declared that we would use the carousel, they will also be included into the build.
In the end, your "profiles.json" file should looks something like this:
{
"build": {
"jsFile": "wink-VERSION-PROFILE-TARGET.js",
"cssFile": "wink-VERSION-PROFILE-TARGET.css",
"version": "1.4.1",
"defaultLocaleList": [ "en_EN" ]
},
"profiles": [
{
"name": "test",
"modules": [
// CORE
"core",
// UX
"inertia", "movementtracker", "window",
// UI
"scroller", "slidingpanels", "carousel"
],
"css": [
"_themes/wink.css",
"_themes/default/css/wink.default.css",
"_themes/default/css/wink.default.buttons.css",
"_themes/default/css/wink.default.icons.css"
]
}
]
}
It's now time to launch the "build.xml" default task (if you're using eclipse and you have ANT installed, just right click on the "build.xml" file and select "Run As > Ant build"). In the end, the build process will have created a "wink" folder in "utils/build" where you will be able to retrieve your generated JS file ("wink-1.4.1-test-default.min.js") and your generated CSS file ("wink-1.4.1-test-default.min.css"). You can now replace your 30 references in your index by those 2 new references:
<link rel="stylesheet" href="../../../../utils/build/wink/css/wink-1.4.1-test-default.min.css" type="text/css"> <script type="text/javascript" src="../../../../utils/build/wink/js/wink-1.4.1-test-default.min.js"></script>
Going further
As I previously said, if you want to customize your build, you can also modify "build.properties". That's where you can define for instance the output directory for your build (instead of the defualt "utils/build/wink"), or the path that will be used while rewriting your images URLs in the minified CSS file... There are many options there that you may want to check ;)
Add your own modules
Under writing...