Web Based, Incremental Rollout File Builder for YUI 3

Click to find here a more detailed explanation of why this is a good idea.

On this page you can try out the web based builder. It will show the set of files that are to be concatenated in one single file, however the building itself is disabled. To be able to build your files you need to install the package on your system.

You'll need YUI 3, PHP CLI and CGI and Ant.

An explanation of how to use the builder is brought on this same page, below the builder.

If you want to install, click to read the step-by-step installation instructions.

 Add your comment or enhacement request on this page


Filename





On test server



How to build your compact JavaScript rollout file

Left column

On the left side, set some configurations for the base name of this file and where to retreive the file when ready.

Choose whether you want to concatenate

versions, choose whether you want to add a string to the filename in order to force update the file in browser caches. You can just write a version number manually if you want.

Right column

"Load stored config" combo box is for managing the configurations that you have already stored in your browser.

Starting out you want to "add" a configuration. It will be for the component as configured at the time of click on the add/update button

The component name is decided by the "filename" part (on the left) while the rest of the configuration is given by the "config" part, that is the modules this component requires.

1. Calculate dependencies for a list of modules

The  A. module list is the list of the modules you are going to "use" and want to roll out in one single file. Write them as a plain, comma separated list or as a JS list.

Click on the load modules wiht deps button to load the required dependecies.

When you have "primed" the page with a set of files, you can click on "Calculate wheight" to let the server measure and show each filesize and the total.

When ready, click on "Build rollout" to launch the build process and let Ant concatenate the list of files. The output from Ant will be displayed in the result window.

2. Calculate the incremental list of dependencies

After you have primed the page with a "main" list of dependencies you can calculate the complement list that is possibly required by another set of modules:

Write those on the B subsequent set field, and click on "Calculate B - A". The list will be displayed in the result window. You can operate on that list the same way as for the first one (weight and rollout)

Click on update to store the current configuration for the current component.

3. Rebuild to test

When you have built a set once, you can rebuild that set again and again using the Rebuild JS into location" to build and copy the same set of dependencies into a location on, say, a test server. Do this for instance each time you edit some JS files from the same set and want to test it on the server.

The path to the JS location and CSS location are stored together with the rest of the component's configs.

Buttons and Copyright field

The buttons on the form get enabled only when it makes sense, so that they give a clue of when you need to update the fileset and when you don't have to.

The copyright field is there because even each minified YUI 3 module has its own copyright notice. When you click on "Rebuild into JS location" and produce a minified version, the script strips out all copyright notices from the original files and only adds one (the one in the textarea) at the beginning of the resulting file. Use this to add a generic copyright notice that covers both YUI and possible gallery components. You can force the script to keep some copyright notices in your or other files, starting the comment with: /*!

Enjoy!

 

Go download !