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 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:
- 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.
- Follow the link http://ajaxmin.codeplex.com/ and click on download.
- A setup file AjaxMinSetup.msi will be downloaded.
- 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.