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.
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.
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.
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.
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.
Here’s what the code in the cssFiles.xml file looks like. The
The jsFiles.xml file uses the same structure, this is what it looks like.
Note that you can include multiple elements within the
Also note that you can include multiple
Visual Studio automatically added these
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)Minify\AjaxMinifier.exe" -CSS -CLOBBER -xml $(ProjectDir)Minify\cssFiles.xml" "$(ProjectDir)Minify\AjaxMinifier.exe" -JS -CLOBBER -xml $(ProjectDir)Minify\jsFiles.xml"
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:
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.
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.