In Visual Studio 2013, how do I minify Javascript and CSS in the post-build step? I'd like to have every single css and js file press into a .min.js, or .min.css in the same folder.

I don't want to check in the minified files, but rather just have them generated post-build.

In Visual Studio 2013, how do I minify Javascript and CSS in the post-build step? I'd like to have every single css and js file press into a .min.js, or .min.css in the same folder.

I don't want to check in the minified files, but rather just have them generated post-build.

• javascript
• css
• visual-studio-2013
• minify
• post-build-event

• There is a free add-on in the Visual Studio Gallery for this: visualstudiogallery.msdn.microsoft./… – TylerH Commented Dec 18, 2014 at 14:59
• B&M is built-in. Configure bundleconfig and make sure WebGrease and Antlr references are there. Runtime will use bundled and minified files based on your debug="false" in web.config. – Abhitalks Commented Dec 18, 2014 at 15:02
• 2 You're not working on an MVC app, are you? It will minify resource files automatically if so. – mellis481 Commented Dec 18, 2014 at 15:07
• The dupe target was of lower quality than this one. Re-opened. – Cerbrus Commented Jul 1, 2016 at 6:45

2 Answers 2

All solutions I found required using different filenames for the minimized versions, and a lot of extra work to switch between using the normal/minified versions.

Instead, I wanted the pressed JavaScript files to have the original names so I didn't have to change the references in my HTML markup. I could use the normal Javascript files in my development environment, then minimized versions would be automatically deployed when publishing.

I found a simple solution that does just that.

First, install Microsoft Ajax Minifier.

Then, in your Visual Studio project file, just before the closing </Project> tag add the following :

<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
<Target Name="AfterBuild" Condition="'$(ConfigurationName)'=='Release'">
  <ItemGroup>
    <JS Include="**\*.js" Exclude="**\*.min.js;obj\**\*.*" />
  <CSS Include="**\*.css" Exclude="**\*.min.css;obj\**\*.*" />
  </ItemGroup>
  <AjaxMin
    JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".jsMIN"
    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".cssMIN" />
</Target>
<PropertyGroup>
  <CopyAllFilesToSingleFolderForPackageDependsOn>
    CustomCollectFiles;
    $(CopyAllFilesToSingleFolderForPackageDependsOn);
  </CopyAllFilesToSingleFolderForPackageDependsOn>
</PropertyGroup>
<Target Name="CustomCollectFiles">
  <ItemGroup>
    <MinJS Include="**\*.jsMIN" />
    <FilesForPackagingFromProject Include="%(MinJS.Identity)">
      <DestinationRelativePath>%(RecursiveDir)%(Filename).js</DestinationRelativePath>
    </FilesForPackagingFromProject>
    <MinCSS Include="**\*.cssMIN" />
    <FilesForPackagingFromProject Include="%(MinCSS.Identity)">
      <DestinationRelativePath>%(RecursiveDir)%(Filename).css</DestinationRelativePath>
    </FilesForPackagingFromProject>
  </ItemGroup>
</Target>

What does the above code do? When you publish in Visual Studio, this code will find every .js and .css file in your source, and create a minified copy using the extension .jsMIN and .cssMIN. It will ignore files that are already minified. Then it will copy these minified files to the deployment folder, using the original file names.

Voilà! You just published minified JS/CSS files, while your original files stay intact on your development environment.

Optional:
Want Ajax Minifier to be packaged with your project? From the Ajax Minifier install folder, you can move AjaxMin.dll and AjaxMinTask.dll directly into your source directory. I put them in my App_Data folder. Once they're somewhere in your source, in Visual Studio right-click them, select Include in Project, and also change their Build Action property to None.

Then in the code I included above, change
<Import Project="$(MSBuildExtensionsPath)\Microsoft\Microsoft Ajax Minifier\ajaxmin.tasks" />
to
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\App_Data\AjaxMinTask.dll" />
Done.

A troubleshooting tip:
My main code above executes AfterBuild and only when the configuration is Release. That's so it will only run during a publish. If your configuration is named something else, or you want it to run in other circumstances, modify the code as needed.

With Microsoft Ajax Minifier you could create powershell script to create minified versions of all files in given folder and add it to Post-build events.

Example for js files(it will be similar for css):

Get-ChildItem *.js -Exclude *.min.js |
    Foreach-Object{
    $file = [io.fileinfo]$_.Name
    ajaxmin $file.Name -out "$($file.Name).min$($file.Extension)"
}

Check also a page with full list of mand line switches e.g.: -map creates source map file.