Automating JavaScript and CSS Minification In SharePoint Apps

Trick or Treat?  In this blog post I’ve got both for you.  This little trick is quite a treat!

Last week I talked about Automating Image Rendition Deployments and this week I’m sticking with the automation theme.

When you build mobile web sites or cross-device-compatible mobile applications, one thing you always want to do is minify the JavaScript and CSS files.

Whether you are targeting mobile devices or not, minifying JavaScript and CSS files is a good practice to follow when developing web applications.

Minification improves the performance (load times) for your web sites or cross-device-compatible mobile applications by making JavaScript and CSS files smaller.  The smaller the file, the quicker it loads, the better the performance!

One thing my team and I like to do on our projects is automate the file minification process.  Thankfully, this process is now very easy to automate.  Here’s one way you can go about it.

This example uses the command-line version of the Microsoft Ajax Minifier from CodePlex and Visual Studio to automate the minification of JavaScript and CSS files in a SharePoint-hosted App.  Keep in mind, sometimes a minified file will cause things to fail depending on the web.  Make sure you test all your functionality when using minified JavaScript and CSS files.

To get started, go download the Microsoft Ajax Minifier from CodePlex.  The Microsoft Ajax Minifier on CodePlex is a command line utility that minifies JavaScript and CSS files.

If you prefer NuGet packages in your development environment, you can also snag a copy the assembly (DLL) at NuGet's website.  Keep in mind, the NuGet package doesn't include the command-line version of the tool.

Once you have downloaded the Microsoft Ajax Minifier and installed the MSI, copy the AjaxMinifier.exe file and add it to a new folder named Minify in your SharePoint-hosted App VS project.  See the screenshot below for reference.

Next, rename the JavaScript and CSS files that come with the SharePoint-hosted App project template that you wish to minify. 

In this example, I will minify the app.css and app.js files, so I will rename them to app.debug.css and app.debug.js.  These renamed files represent the non-minified versions of the files which I will develop with.

After you have renamed the files, create the JavaScript and CSS files that the AjaxMinifier will inject the minified versions of the app.debug.css and app.debug.js into.  Put these files in the same folders where the .debug files are located. 

These files have the same file names as the files you just renamed.  There is no need to put any content into them--the AjaxMinifier.exe will populate these files.

Next, create two XML files and add them to the Minify folder as well.  In my example, these files are named cssFiles.xml and jsFiles.xml.  These files represent manifests that tell the AjaxMinifier.exe command-line utility which files you wish to minify and the names of the minified files they should generate. 

The following screenshot demonstrates what your SharePoint-hosted App will look like in Visual Studio after you have performed these tasks.  It also uses color coding to help you understand which JavaScript and CSS files the xml manifest files map to. 

Here’s what the code in the cssFiles.xml file looks like.  The element specifies the minified CSS file to generate.  The element specifies the source file to minify.  

The jsFiles.xml file uses the same structure, this is what it looks like.

Note that you can include multiple elements within the element if you wish to combine several files into a single minified file.  Using this approach will further optimize your application so only a single request is required to load all the JavaScript associated with your App.

Also note that you can include multiple elements if you wish to minify several files.

Next, modify the elements.xml files associated with the Modules which deploy the JavaScript and CSS files.  Remove the elements which correspond to the .debug versions of the JavaScript and CSS files so they are not included with the application upon packaging and deployment. 

Visual Studio automatically added these elements when you renamed the files.

Here is the elements.xml file that deploys the app.css file.

Here is the elements.xml file that deploys the app.js file.

Once you have that done, right-click the SharePoint-hosted project in the Solution Explorer, select Properties, and click the Build Events tab.

Add the following code to the Pre-build event command line textbox.

"$(ProjectDir)MinifyAjaxMinifier.exe" -CSS -CLOBBER -xml $(ProjectDir)MinifycssFiles.xml""$(ProjectDir)MinifyAjaxMinifier.exe" -JS -CLOBBER -xml $(ProjectDir)MinifyjsFiles.xml"

This code invokes the AjaxMinifier.exe command line utility to minify the JavaScript and CSS files listed in the xml manifest files you created.  For more information about the various arguments you can use with the AjaxMinifier.exe command line utility see the documentation on the Microsoft Ajax Minifier CodePlex site.

Now it’s time to try it out!  Right-click the SharePoint-hosted project in the Solution Explorer and select Rebuild. 

Inside Visual Studio, notice in the Output Window the AjaxMinifier.exe command-line utility reports the status of the minification process.  Here’s what it looks like:

--- Rebuild All started: Project: AutoMinifySPApp, Configuration: Debug Any CPU ---  Microsoft Ajax Minifier (version 5.2.5021.16390)  JavaScript and CSS minification and verification command-line utility  Copyright 2013 Microsoft Corporation  Minifying 'C:DemosO365AutoMinifySPAppAutoMinifySPAppMinify..Contentapp.debug.css'  Microsoft Ajax Minifier (version 5.2.5021.16390)  JavaScript and CSS minification and verification command-line utility  Copyright 2013 Microsoft Corporation  Minifying 'C:DemosO365AutoMinifySPAppAutoMinifySPAppMinify..scriptsapp.debug.js'  Original Size: 975 bytes; reduced size: 428 bytes (56.1% minification)  Gzip of source input approx. 474 bytes (51.4% compression)  Gzip of minified output approx. 256 bytes (73.7% compression)  ========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ==========

You will notice that the app.debug.css CSS file wasn't minified. This is because there is no CSS in the app.debug.css for the out of the box SharePoint-hosted App template in Visual Studio. 

However, you will notice that the app.debug.js JavaScript file was reduced by 428 bytes during the minification process.

In this example, the amount of bytes you save is minimal, but when you create a SharePoint-hosted app, your app.debug.css and app.debug.js files will include much more CSS and JavaScript than the out-of-the-box starter files. The benefit from minifying the files will increase and be very evident.

If you open the app.debug.js file you will see the contents are still the same and you can easily develop with the file.  

Opening the app.js file shows the minified version of the file.  Notice all the code is in a single line, and comments and whitespace have been removed.

Nice!