JavaScript Source Joiner/Combiner

JsCombine
Source Code

The complexity of JavaScript code has increased rapidly over the last two years. The emerging of various JavaScript libraries/frameworks along with Ajax technology enable us to build sophisticate applications which are comparable to desktop ones. A mid-size to large-size Ajax/JavaScript applications normally consist of thousands lines of code. For readability and navigability, it is practical and logical to separate the code into different files. For example, allocate one file for each class. Many developers don't want to or at least hesitated at doing so because more JavaScript files means additional HTTP requests to the server, which impacts page loading efficiency.

How to tackle this problem?

If we think carefully, the way that JavaScript handles multiple files is very simple. Let's assume we have two JavaScript files A and B, and B requires A to run properly. We have another file which is the concatenation of file A and B in A->B order. If script A contains no relative path reference, including the concatenated file using the <script></script> tag to a HTML page is contextually equivalent to including files A and B altogether. By using this concatenated file we reduced the number of request to the server. However joining multiple files is a laborious task especially when it has to be done on every time the source is modified. For this reason, I wrote a small Java program to simply this task.

Usage

1. Create a plain text file
2. Enter the absolute path of all the source files you want to combine, one file per line (order matters)
3. Run JsCombine.jar

java -jar JsCombine.jar fileListFileName outPutFileName

Examples

Let's say you have four js files under a folder (imageloader.js, loadingpanel.js, lib.js, functions.js) and you want to combine them into one file.

1. Create a text file fileList.txt
2. Edit fileList.txt

   C:\Users\Cuong\Desktop\imageLoader\imageloader.js
   C:\Users\Cuong\Desktop\imageLoader\loadingpanel.js
   C:\Users\Cuong\Desktop\imageLoader\lib.js
   C:\Users\Cuong\Desktop\imageLoader\functions.js
   

3. Run the following

   java -jar JsCombine.jar fileList.txt one.js
   

Code Compression

To further improve loading efficiency, you can compress the script after combining them. For this purpose, I highly recommend Julien Lecomte's YUI compressor. With both utilities, you can now create a batch file and distribute your JavaScript files in one click.

Here's an example batch file in Windows:

build.bat

java -jar JsCombine.jar C:\fileList.txt C:\one.js
java -jar C:\yuicompressor-2.2.5.jar --type js C:\one.js -o C:\one-min.js

Download

JsCombine
Source Code
Java Runtime Environment

Go to Top

More interesting posts ...

• The Mighty Component of YUI 2.5.0 - Uploader
• A Useful JavaScript Image Loader
• A YUI Loading Panel Widget
• YUI Based Lightbox - Final
• A Compilation of YUI Callback
• The Missing Parameter of jQuery.post
• Asynchronous File Upload - YUI’s Approach
• YUI Based Lightbox - Revisited
• Debug JavaScript with Firebug
• Creating Lightbox with Yahoo! User Interface Library