The easiest way to prepare your JavaScript for release is to create a script that can be run from the command line. In this example we will use the YUI Compressor, but it works almost identically for Closure. The only difference is the command-line parameters. In this example we create a command-line script that can be run from the Windows command line, that will take the Piano Hero application we wrote in Chapter 7, Piano Hero, and package it up for release. You can find the code for this section in Chapter 10/example10.1.
Before we start, we need to define a folder structure for the application. I like to create a base folder for the application that contains a src folder and a release folder. The base folder contains the command-line batch script. The src folder contains all of the source code and resources. The release folder will contain the compressed JavaScript file and all other resources necessary to run the application:
Now let's create our batch script file and name it release.bat. The first thing we need to tell YUI is what files to compress. There are a couple of ways to do this. We can either concatenate all of our JavaScript files into one file and then reference that one file, or pass in a list of all the individual files. The method you use depends on your needs.
If you need the files to be processed in a certain order, or you don't have a lot of files, then you can specify them individually as parameters. If you have a lot of files in your application and you're not worried about order, then it's probably easiest to just concatenate them into one file. For this example, we will use the type command to concatenate all JavaScript files into one file named pianoHero.collated.js:
type src*.js > pianoHero.collated.js
We use the type command to find all .js files in the src folder and write them out to a file named pianoHero.collated.js. Note this does not include the files in the lib folder. I like to keep them separate, but you can certainly include any external libraries if you prefer (and if their license permits it). Now we will execute the compressor passing in the collated JavaScript file:
java -jar ..yuiyuicompressor-2.4.6.jar --type js -o releasepianoHero.min.js pianoHero.collated.js
We start the Java runtime telling it where to find the YUI Compressor's JAR file. We pass in a file type parameter of js since we are compressing JavaScript (YUI can also compress CSS). The -o parameter tells it where to write the output to. The last is the JavaScript file (or files if more than one) we want to compress.
Now we have a pianoHero.min.js file in the release folder. We still need to copy all of the other resources to the release folder including the HTML and CSS files, the jQuery library, and the audio files:
xcopy /Y src*.html release xcopy /Y src*.css release xcopy /Y /S /I srclib releaselib xcopy /Y /S /I srcaudio releaseaudio
We use the xcopy command to copy pianoHero.html, pianoHero.css, everything in the lib folder, and everything in the audio folder to the release folder. At this point we have everything we need in the release folder to run the application.
There's one last thing to do. We need to remove the obsolete <script> elements in the HTML file and replace them with one that points to our compressed JavaScript file. This part isn't easy to automate, so we need to crack the file open and do this manually:
<head>
<title>Piano Hero</title>
<link href="pianoHero.css" rel="StyleSheet" />
<script src="lib/jquery-1.8.1.min.js"></script>
<script src="pianoHero.min.js"></script>
</head>That's it. Now open the application in your browser and do a smoke test to make sure everything still works the way you expect it and then ship it!
We created a Windows command-line script to combine all of our JavaScript source files into one and compress it using the YUI Compressor. We also copied all of the resources necessary to run the application to the release folder. Lastly, we changed the script reference to the compressed JavaScript file.