CODEWITHSUNDEEP
javascriptdojodojo-build
Remco
Remco

Reputation: 172

Dojo build css and custom javascript

I've set up a single html page that uses three dojo widgets and I'm trying to create a custom build from it using dojo 1.7.5. The build succeeds leaving me with a dojo.js that includes the files I need using this build file:

var dependencies = {
action: "release",
selectorEngine: "acme",
stripConsole: "none",
cssOptimize: "comments.keepLines",

layers: [
    {
        name: "dojo.js",
        dependencies: [
            "dijit.form.ValidationTextBox",
            "dijit.form.DropDownButton",
            "dijit.form.Button",
            "dijit.form.Form",
            "dijit._base",
            "dijit._Container",
            "dijit._HasDropDown",
            "dijit.form.ComboButton",
            "dijit.form.ToggleButton",
            "dijit.form._ToggleButtonMixin",
            "dojo.parser",
            "dojo.date.stamp",
            "dojo._firebug.firebug"
        ]
    }, {
        name: "../test/test.js",
        dependencies: [
            "test.test"
        ]
    }
],

prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "ourpeople", "../ourpeople" ]
]
};

The questions I can't seem to find an answer to:

I'm fairly new to the dojo build system and (especially) so perhaps I'm expecting things that the dojo build system isn't designed to do or maybe om going about this the wrong way if so any tips or suggestions are more than welcome.

Cheers!

Test.js:

function test1() {
    console.log("test1");
}

Index.php:

<script type="text/javascript" src="js/release/dojo/dojo/dojo.js"></script>
<script type="text/javascript" src="js/release/dojo/test/test.js"></script>

<script type="text/javascript">                     
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.Form");            

    dojo.ready(function() {
        test1();
    });
</script>

Upvotes: 4

Views: 1607

Answers (1)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

I'm using cssOptimize, I was expecting a single css file in which all the used css files were imported. However I can't find such a file. Is this the way dojo compresses it's css or are my expectations wrong? If so where can I find it in my release folder?

When you use cssOptimize, the Dojo build optimizes and flattens CSS files in place. So for example, if you're using Dijit's Claro theme, when you load dijit/themes/claro/claro.css from source, it contains a series of @import statements which in turn load more files. When you load claro.css from a build with cssOptimize, it is one file containing all of the styles previously referenced via those separate files.

My test.js contains a function test1() if I call it from my built js it states test1 is not defined. I call that function directly without dojo. I'm assuming that building custom js only works if it is a dojo class using declare?

Dojo doesn't expect every JS file to be a "class" using declare but it does expect each file to be a module which doesn't implicitly define globals (since globals should be avoided in modules anyway). When the build process encounters a module that it thinks or knows isn't AMD, it assumes it's a legacy Dojo module and wraps it in a boilerplate to convert it to AMD. This boilerplate ends up encapsulating your globals into a function scope, so they are no longer globals.

Given that you're using Dojo 1.7, you should ideally be using the AMD format to define and consume modules. dojotoolkit.org has a tutorial introducing AMD modules, and if you're migrating from Dojo 1.6 or earlier, there's also a tutorial to help you transition.

Final question, I needed to include several dojo files in the build manually such as dojo._firebug.firebug since after my initial build it was still using xhr calls to get those files. After including the files manually I still see xhr calls from dojo to specific resources: dojo/nls/dojo_ROOT and dijit/form/nls/validate.js. Those files are created during the build process and therefore can't be included in the dependencies in the build profile. Anyone any thoughts on this matter since I'm looking to distribute dojo in a single file.

I'm not sure why you're seeing dojo/_firebug/firebug being automatically loaded, but based on what you've said/shown above I would immediately suggest the following:

  • Convert your modules/code to AMD format
  • Add async: true to your dojoConfig which will cause the loader to operate in asynchronous mode, which means:
    • It loads modules through script injection instead of synchronous XHR
    • It won't unconditionally load all of dojo/_base
  • Add customBase: true to your dojo/dojo layer which will prevent the build from defaulting to include all of dojo/_base

As for the nls modules, to an extent it's normal to still see NLS files requested, though if your build is configured properly there would ordinarily just be one NLS file per layer and that's it (the fact that you're seeing a separate request for validate leads me to think you haven't covered all of your dependencies). The reason NLS remains separate is because there is one NLS bundle per locale, and it doesn't make sense to build all locales into one layer - that would force people to pay for resources in 20 languages they don't care about.

Upvotes: 6

Related Questions