A quick guide to combining and compressing javascript files using Koala

koala-postMany times, web developers find themselves doing a project that requires too many Javascript to be loaded. It is during these times that you wish there was way to combine all your scripts into one compressed file. Fortunately for us, many, many people have found solutions to this problem. Consequently, there exists a wide selection of Javascript concatenation and compression tools. However, none are as straight forward and user friendly as Koala, a free GUI compiler. Not only does Koala do a great job compiling Sass files, but it can combine and minify Javascript as well.

Well, enough talk. Here is a quick guide.

Step 1: Installation

The first step is to download, install and launch Koala. This is what you should see the first time you launch Koala.

koala-start

Step 2: Adding a project

Now all you have to do is locate your Javascript folder, and drag it into the window. Koala will then list every Javascript file it can find.

Step 3: Compressing

Now all you have to do is select any listed Javascript file and press compile. Koala will then compress your file and produce a minified file using the same name but with the word min added to the end just before the js extension. That’s it! No complications. No typing commands in a console. Just drag, select and click.

Step 4: Combining files

Now that you now how to use Koala, we will go to the next step of joining files together. Let’s say you have the following JS files you want to join together:

  1. alpha.js
  2. beta.js
  3. gamma.js
  4. delta.js

If we wanted all these files to be combined inside a file called all.js, then we would create an empty file with a similar name. Koala would then display your project as follows:

koala-js-join

Now open all.js in an editor and type the following following inside:


// @koala-append "alpha.js"
// @koala-append "beta.js"
// @koala-append "gamma.js"
// @koala-append "delta.js"

As you may have guessed,  @koala-append is the magical command that reference our files. Koala actually supports  2 commands to import Javascript files.

  1. @koala-append will paste the referenced  file after the mentioned statement
  2. @koala-prepend will paste the referenced file before the mentioned statement

So now all we have to do is select all.js and click compile. Koala will then “paste” all the referenced files inside all.js, and produce a minified file. That’s it!