Bundling and Compressing / Minifying Javascript and CSS files using Powershell Script

In ASP.Net MVC4, bundling and minification process for JS and CSS files is very simple. But in older version of project or open source project, you have to manually bundle and minify the Javascript and CSS files.
Here I am going to explain on how to do the above process using powershell script and Yahoo UI Compressor JAR file.

Why we need to BUNDLE the JS or CSS files?
If you are having multiple JS files in your project, multiple request sent to server to retrieve the files. If you have bundled the relative JS files into a single one, only one request sent to the server to retrieve the file.

Why we need to MINIFY the JS or CSS files?
Even if you have implemented the bundling of JS files, file size will be large and loading time will increase. If you have minified (removing unwanted space, lines and others) the JS files, file size reduced to small and less time take to load the JS file in browser.

And also, if you are using YSLOW for performance analysis, it will suggest you to do the bundling and minification.

Follow below steps to experiment the bundling and minification

1. Create two JS files (CustomerJS1.js, CustomJS2.js).

CustomJS1.js:

   1:  function showAlert1()

   2:  {

   3:      alert("testing combining and compression");

   4:  }

CustomJS2.js:
 

   1:  function showAlert2()

   2:  {

   3:      alert("testing combining and compression");

   4:  }

2. Make sure following software's installed in your system.

    a) Powershell
    b) Java JDK 7
    c) Download Yahoo UI Compressor JAR file


3. Use the below powershell script to create a bundled and minified file. please see the comments for each command of powershell to understand more on powershell script.

   1:   

   2:  #defining version

   3:  $version = "1.0";

   4:   

   5:  #creating new file. "-force" replaces new file if file already exists

   6:  New-Item "CustomJS-$version.js" -type file -force

   7:  New-Item "CustomJS-$version.min.js" -type file -force

   8:   

   9:  # Getting content from multiple custom JS files and put into a single version file.

  10:  # if your custom JS files and output files located in same directory, you have to exclude the output files. Otherwise you get access denied error.

  11:  Get-Content "Custom*.js" -Exclude "CustomJS-$version.js", "CustomJS-$version.min.js" | Add-Content "CustomJS-$version.js"

  12:   

  13:  #compressing JS files using Yahoo UI Compressor JAR file

  14:  java -jar yuicompressor-2.4.8pre.jar "CustomJS-$version.js" -o "CustomJS-$version.min.js"

4. After executing the above script in powershell, you can see the output of  bundled and minified files. Make sure YUI JAR file located in relative path while executing the powershell script.

CustomJS-1.0.js:

   1:  function showAlert1()

   2:  {

   3:      alert("testing combining and compression");

   4:  }

   5:  function showAlert2()

   6:  {

   7:      alert("testing combining and compression");

   8:  }

CustomJS-1.0.min.js:

   1:  function showAlert1(){alert("testing combining and compression")}function showAlert2(){alert("testing combining and compression")};

Powershell script for Bundling and Minification of CSS files :

   1:  #defining version

   2:  $version = "1.0";

   3:   

   4:  #creating new file. "-force" replaces new file if file already exists

   5:  New-Item "CustomCSS-$version.css" -type file -force

   6:  New-Item "CustomCSS-$version.min.css" -type file -force

   7:   

   8:  # Getting content from multiple custom CSS files and put into a single version file.

   9:  # if your custom CSS files and output files located in same directory, you have to exclude the output files. Otherwise you get access denied error.

  10:  Get-Content "Custom*.css" -Exclude "CustomCSS-$version.css", "CustomCSS-$version.min.css" | Add-Content "CustomCSS-$version.css"

  11:   

  12:  #compressing CSS files using Yahoo UI Compressor JAR file

  13:  java -jar ..\JAR\yuicompressor-2.4.8pre.jar "CustomCSS-$version.css" -o "CustomCSS-$version.min.css"