This procedure is based upon two reasonably good references:
- http://dojotoolkit.org/documentation/tutorials/1.6/build/
- http://dojotoolkit.org/reference-guide/build/
It took me a while to make it all work because the filesystem locations were not obvious to me.
Design Pattern
Adopt a design pattern where all your require() statements for dojo code are located in one javascript file. This allows the dojo build process to create one new javascript file with the same name, to replace your original. The new file replaces your list of dependents with the actual dojo javascript code.
Prereqs
Fetch a dojo source build, for example:
Unzip this in a sandbox directory on your machine, for example:
/home/sag/sandbox/dojo-release-1.6.1-src
where you will find subdirectories dojo, dijit, and dojox.
Coding
Here are two simple files I created, based upon first reference. First the HTML:
/home/sag/sandbox/dojo-release-1.6.1-src/buildtest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="dojo/dojo.js"></script>
<script>
dojo.require("my.app");
function init() {
alert("Dojo ready, version:" + dojo.version);
dojo.byId("greeting").innerHTML +=
". Greetings from dojo " + dojo.version;
}
dojo.ready(init);
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>
and then the javascript:
/home/sag/sandbox/dojo-release-1.6.1-src/my/app.js
dojo.provide("my.app");
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.compat");
You are now set up to do the build for this HTML/javascript.
Build
Go into the util/buildscripts directory. For example:
cd /home/sag/sandbox/dojo-release-1.6.1-src/util/buildscripts
Issue the build command. Specify the path to your HTML file. For example:
./build.sh
action=release
htmlFiles=/home/sag/sandbox/dojo-release-1.6.1-src/buildtest.html
It runs for a minute or so.
Inspect the results. The important files are a new dojo.js and new app.js
/home/sag/sandbox/dojo-release-1.6.1-src/release/dojo/dojo/dojo.js
/my/app.js
Test
Move the three files to the filesystem of your webserver. For example, for apache:
/var/www/html/dojo/dojo-opt/buildtest.html
/dojo/dojo.js
/my/app.js
Browse to the HTML and verify it works.
Verify Improvement
I captured screenshots of the downloads required when fetching the original HTML/javascript with the original dojo build. It required more than a dozen file downloads. (click the photo to enlarge)
Fetching the new HTML/javascript with optimized dojo results in three, much smaller downloads.
Hi, it is one week already am desperatly trying to build my one dojo, i have dowloaded sources on dojo's web site of the current lattest version (1.9.0), i included the dojo directory in my html file, declare all the dojo requires, an launch the build command, everything goes well, i copy therefore the dojo, dijit and dojox directory that has been produced and stored in the release directory, when i execute my html file, i see no change, firebug still report me a lot of 'GET' actions between client and server. Please can someone explain to me what to do?
ReplyDeleteHMS, you might want to try asking here: http://dojotoolkit.org/community/ Sorry I am not current.
Delete