How To Minify JavaScript & Css Files

In the world of programming, everyone is concerned about performance. Although the system are getting more and more advanced but hunger for performance still remains the same. So in this post we will learn about how we can locally minify our JavaScript and Stylesheet css files just by using a batch file. Let's first discuss few things

What Is Minification?

Minification of files is a process in which our raw .js or .css file is converted to a compressed file. This compressed file is of much smaller size as compared to original one.

What Happens In Minification?

The minifier .bat file that we will be discussing shortly about, converts all the content in raw file to a compressed form. It removes all the extra spaces, renames the variables to shorter one if possible and also removes comments. Consider below images to see the difference.

Minified JavaScript File

In the above image we have taken example of a simple javascript file. It has a function with parameters and a commented line. Now after minification, notice that the commented line has been removed, also the name of the argument variable is shortened to a single character name. Also the extra spaces are now removed and the code is now in single line. You can notice we have mentioned the difference in size of files. This difference becomes more significant when we consider a big JavaScript file, thus enhancing the performance.

Minified css File

On the similar lines of js files, the above image shows how css file is minified. notice that comment and extra spaces are removed, also amazing thing to notice is that the text color and rgb color is now converted to hex codes thus saving on file size.

How To Setup Minifier Locally?

Setting up minifier is very easy. You need two things:

• Minified.bat
• Microsoft Ajax Minifier Setup

For minified.bat just copy the following code and paste it into your notepad. Then save that file as minified.bat

Make sure you give .bat as extension to that file.

:: Download ajaxmin to exec. http://ajaxmin.codeplex.com/
:: This file should be save as encoding UTF-8 (to accept )
:: just compact *.js|*.css
:: . = current dir
:: -clobber = overwrite file
:: /r = recursive
:: ~d = drive letter only
:: ~p = path only
:: ~n = file name only
:: ~x = file extension only
:: ~dpn = full path without extension
ECHO OFF
PATH=%PATH%;c:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier
SET include=*.js *.css
SET root_path=.
SETLOCAL enableextensions enabledelayedexpansion
FOR /r %root_path% %%F IN (%include%) DO (
ECHO %%F|findstr /i ".min"%%~xF >nul:
if ERRORLEVEL 1 (
ajaxmin -clobber "%%F" -o "%%~dpnF.min%%~xF"
)
)

How To Install Microsoft Ajax Minifier?

Now that we have minified.bat with us, we need microsoft ajax minifier because our batch file uses it to minify js & css files.

1. Follow the link  http://ajaxmin.codeplex.com/ and click on download.
2. A setup file AjaxMinSetup.msi will be downloaded.
3. Now install this setup file by double clicking on it.

Now when the setup is complete, you are ready to go.

Copy that minified.bat you created into the folder where you have your js or css files. Now double click on minified.bat and you will notice a console application runs and closes.

Now you will see, minified files created for all your js and css files with extension as .min.js & .min.css respectively.

Do let us know if you get stuck at any point. We will sail you across.

If you use ASP.Net, you can learn about Bundling & Minification which follows a much more advanced approach to minification.

Happy Learning!!!