xjs, Synergy and YUICompressor Together

Published May 8, 2008 in Build Process, JavaScript, Server-Side JavaScript, Synergy, xjs

Update This article likely requires a bit of updating to work the the newest version of xjs and Synergy. The general ideas are still as described below.

Last night I added the YUICompressor as an xjs module. This was trickier than I thought as the YUICompressor monkey patches the Rhino parser files. So I had to renamespace all the Rhino code and create a custom build of the YUICompressor jar so it can coexist with the normal Rhino jar.

Now it is easy to compress JavaScript and CSS file in from a JavaScript script.

Suppose you have a file input.js with content

function foo() {
  var bar = 21; // the bar variable
}

You can minimize this with the following JavaScript

#!/usr/bin/env xjs
require('helpers');
require('YUICompressor');
println(YUICompressor.compressJSFile('input.js'));

Synergy Build Process

Now with the File and YUICompressor xjs modules it is possible to create a build process for concatenating and minifying JavaScript and CSS files in a Synergy web application. The whole build process can be written in JavaScript.

I've written about build processes before. That previous article outlines a system that involves generating time stamped files. The current build process for a Synergy app users the simpler version mentioned at the bottom of that article without timestamps.

When you generate a Synergy web applicaiton

$ synergy hello

You will see the following directory structure.

  • hello/
    • bin/
      • buildStatic
    • config/
    • db/
    • lib/
    • log/
    • test/
    • tmp/
    • www/
      • css/
      • js/
      • src/
        • css/
        • js/

We create seven files.

file: hello/www/src/js/alpha.js

alert('alpha.js');

file: hello/www/src/js/beta.js

alert('beta.js');

file: hello/www/js/all.js

document.write('<script src="/src/js/alpha.js" type="text/javascript"><\/script>');
document.write('<script src="/src/js/beta.js" type="text/javascript"><\/script>');

file: hello/www/src/css/one.css

/* docs */
h1 {
  color:#FF0000;
}

file: hello/www/src/css/two.css

/* docs */
p {
  color:#0000FF;
}

file: hello/www/css/all.css

@import url(/src/css/one.css);
@import url(/src/css/two.css);

file: hello/www/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

  <title>Content Page</title>

  <link href="/css/all.css" rel="stylesheet" type="text/css">
  <script src="/js/all.js" type="text/javascript"></script>

</head>
<body>

  <h1>Interesting Content</h1>
  
  <p>Lorem ipsum</p>

</body>
</html>

Start up the web server

$ cd hello
$ xws

If you point your browser to http://localhost:3000/, you should see two alerts and some coloured text. If you look in Firebug's network monitor you will see that the above seven files loaded.

Now we can run the build process to see what things would be like in production.

WARNING: This is a destructive build process, it is only intended to be used as part of your deployment process. It overwrites the files in hello/www/js and hello/www/css and it deletes the hello/www/src directory

$ cd hello
$ xjs bin/buildStatic

Look in the hello/www/js/all.js and hello/www/css/all.css files to see the minified code.

If you reload http://localhost:3000/ and you should only see three files load in Firebug's network monitor.

If you are interested in the details of this Synergy static files build process they are encapsulated completely in JavaScript in hello/bin/buildStatic.

No doubt the build process will evolve over time but it is satisfying to see JavaScript doing this type of scripting work.

Comments

Have something to write? Comment on this article.