How to Compress Javascript File Using YUICompressor

One way to speed up access to the website is reducing the size of the files so that the download time become much faster. One of them is a javascript file, so this time, we’ll discuss how to compress javascript file using YUICompressor.

YUICompressor is one of the best javascript compressors along with Closure Compiler (developed by Google) and UglifyJS that used by the jQuery to compress its library.

Many reviews say that this compressor is 100% safe to use both for javascript and CSS files.

I. Install Java Runtime Environment

To be able to use YUICompressor, we need to install the Java Runtime Environment (JRE). To check whether the JRE is installed on your system, open a command prompt and type java --version or just java and then press enter.

If windows do not recognize the command, then the JRE is not installed, if already installed, it will look like the following

Check JRE Version

in the picture above, the version of the JRE is 8 (displayed as 1.8.x)

If you want to install the JRE, first, visit the Java SE – Download, find the JRE download link and click the button. On the next page, click “Accept License Agreement” and then select the .exe file that you want to install. If your Windows is 64bit, then it doesn’t matter if you install the 32 bits version.

II. Download YUICompressor (.jar file)

To download YUICompressor, you don’t need to clone or download it from Github repo, because everything there is source code, all we need is file a .jar (Java Archive) file.

To download the LATEST VERSION of .jar file of YUICompressor, please visit it’s official release page at: yui / yuicompressor and then click the .jar file link.

Download YUICompressor .jar File

.jar file names typically have a format: YUI Compressor-x.x.x.jar, e.g. YUICompressor-2.4.8.jar, in this tutorial I’m using version 2.4.8.

III. Compress Javascript File Using YUICompressor

Next, let’s compress javascript file using YUICompressor, the steps we need to do is:

  1. First, we create a working directory where we’ll put all the necessary files, for example, I’ll create a directory named compressor on E drive.
  2. Copy yuicompressor-2.4.8.jar file that has been downloaded and javascript files that you you want to compress to the working directory, for example, I’ll use the jquery-1.12.4.js file.

    Open a command prompt and navigate the cursor to the working directory that we have created earlier and then type the command using the format: java -jar /path/to/yuicompressorfile path/to/original/javascriptfile -o path/to/outputfile

    In this example I use the command of: java -jar yuicompressor-2.4.8.jar jquery-1.12.4.js -o jquery-1.2.4_min.js

    Compress Javascript File Using YUICompressor - Command Line

    The result is:

    Compress Javascript File Using YUICompressor

IV. Compress Multiple Javascript Files Using YUICompressor

In some situations, we may want to compress a lot of javascript files at the same time, which of course we don’t want to do it one by one manually.

YUICompressor itself already provide this feature, for example, we’ll compress data.js, main.js, and shared.js files, the command is:

java -jar yuicompressor-2.4.8.jar *.js -o ".js$:-min.js"

The command will compress all javascript files (files with .js extension), to compress specific files, use the following command:

java -jar yuicompressor-2.4.8.jar data.js shared.js -o ".js$:-min.js"

The result is:

Compress Multiple Files Using YUICompressor

IV. Combine and Compress Javascript Files Using YUICompressor

Furthermore, not only compress multiple files, maybe we want to combine that files too.

To combine them, we can not use the YUICompressor built-in command, instead, we have to do it manually or use a standard Windows command prompt.

Here is the windows command to combine all the javascript file and then compress it using YUICompressor

type file1.js file2.js > merged.js && java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js

The above command is used to combine specific files, if we want to combine all files within a directory, we can use the following command:

copy /b *.js merged.js && java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js

Do the both commands always succeed? consider the following image:

Error Occur While Compressing File Using YUICompressor

in the image above, the file was successfully merged into merged.js file, but an error occurs because the missing of a semicolon (;), this is due to the code in the data.js file (first file) doesn’t end with a semicolon. By itself, data.js file is fine and work without any problem, but when combined, the statement must be ended with a semicolon.

To fix it, first, add a semicolon at the end of each file and then combine it.

for %f in (*.js) do echo ; >> %f

combine and compress the file

copy /b *.js merged.js && java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js

Combining And Compressing Javascript Files Using YUICompressor

The result is:

Combine And Compress Javascript Files Using YUICompressor

V. Automate The Process

If the we do the above task again and again, then consider to make it automatic, so we don’t need to open and run a command prompt many times manually.

One way to do is create a .bat file.

For example, continuing the previous example, we’ll create a .bat file to combine and compress data.js, main.js, and shared.js files located in the E:\compressor directory.

Open your text editor (e.g: notepad) and copy-paste the following command:

for %%f in (*.js) do echo ; >> %%f
copy /b *.js merged.js java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js
pause

then “Save As” it as a bat file (e.g: mergeall.bat) and place it in the same directory with the javascript & yuicompressor file. Double-click to run the .bat file.

The result is:

Combine And Compress Javascript Files Using YUICompressor And .bat File

Furthermore…

You can learn more about the options of YUICompressor command by visiting the official page: YUICompressor – Github or typing java -jar yuicompressor-2.4.8.jar --help command in the command prompt windows.

As a comparison, you can try other compression tools: Closure Compiler and UglifyJs

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social