steal.build  function     

Builds an html page's JavaScript and CSS files by compressing and concatenating them into a single or several files.

Steal can also build multiple applications at the same time and separate shared dependencies into standalone cache-able scripts.

How it works

Steal.build opens a page in Envjs to extract all scripts and styles from the page. It compresses the resources into production.js and production.css files.

Steal.build works with or without using steal.js, so it could work with other script loaders.

Building with steal.js.

Building with steal is easy, just point the steal/buildjs script at your page and give it the name of your application folder:

js steal/buildjs path/to/page.html -to myapp

If you generated a steal app or plugin, there's a handy script already ready for you:

js myapp/scripts/build.js

Building without steal.js

You can compress and package any page's JavaScript by adding compress="true" attributes to your script tag like the following:

<script src="file1.js" type="text/javascript" compress="true"></script>
<script src="file2.js" type="text/javascript" compress="true"></script>        

and then running either:

js steal/buildjs path/to/page.html -to [OUTPUT_FOLDER]

or:

js steal/buildjs http://hostname/path/page.html -to [OUTPUT_FOLDER]

This will compress file1.js and file2.js into a file package named production.js an put it in OUTPUT_FOLDER.

Common Problems

If you are getting errors building a production build, it's almost certainly because Envjs is close, but not quite a fully featured browser. So, you have to avoid doing things in your page that Envjs doesn't like before onload. The most common problems are:

Malformed HTML or unescaped characters

Steal does not have as tolerant of an HTML parser as Firefox. Make sure your page's tags look good. Also, make sure you escape characters like & to &amp;

DOM manipulations before onload

EnvJS supports most DOM manipulations. But, it's not a graphical browser so it completely punts on styles and dimensional DOM features. It's easy to protect against this, just wait until document ready or onload to do these things.

Unending timeouts or intervals before onload

Envjs won't quit running until all timeouts or intervals have completed. If you have a reoccuring 'process', consider starting it on document ready or onload.

Building With Shared Dependencies

If you are using steal in a setting with multiple pages loading similar functionality, it's typically a good idea to build the shared functionality in its own script. This way when a user switches pages, they don't have to load that functionality again.

To do this, use the buildjs script with the names of your apps:

./js steal/buildjs myco/search myco/searchresults music

steal.build function

Takes a url, extracts

steal.build(url, options) -> undefined
{String}

an html page to compress

{Object}

An object literal with the following optional values:

NameDescription
to The folder to put the production.js and production.css files.
all Concat and compress all scripts and styles. By default, this is set to false, meaning scripts and styles have to opt into being compress with the compress='true' attribute.
compressor The compressor to use: shrinksafe, localClosure, closureService or yui

Note that you must install shrinksafe and YUI compressor manually, because they are not included in the JavaScriptMVC distribution.

{undefined}
© Jupiter IT - JavaScriptMVC Training and Support