Compile CSS/JS files on Save using Bundler and Minifier

Question

I have recently switched from Visual Studio 2013 to Visual Studio 2015 for developing my Web Application in MVC. We are using the LESS and JS files to compile to the Minified versions of both these files types.

Now in VS2013 there was a feature where in the LESS file used to compile automatically to .CSS file on any change made to .LESS files.The Same used to happen on JS files with .min.js file being updated on any change to JS files.

So now for VS2015 I know that there are new independent extensions for doing this namely the "Web Compiler" and "Bundler and Minifier" for which I have done comprehensive study as well, but I am still not able to use them to update the minified versions if .LESS or .JS files are changed accordingly.

I know that there are these Task Runners called Grunt and Gulp available for VS2015 but I need to know how can I achieve this compilation on save using these tools.

Answer 1

Answer 1 This can often be fixed by deleting the %localappdata%\temp\WebCompiler??? folder.

Sometimes you need to restart VS, sometimes you don't.

Doesn't work for everyone, but seems to work for a lot of people.

Answer 2 For those interested, I found another answer to this, which seems to offer an extra side benefit.

If you add a Razor view to your project (I named it JsHelper.cshtml and added it in \Views\Shared) and use the following for the contents (extra line breaks added to make it fit in the SO width)...

@model string
@{
  string ext = HttpContext.Current != null
               && HttpContext.Current.Request.Url.Host.Contains("localhost")
    ? ""
    : ".es5.min";
}
<script src="/Scripts/@Model@(ext).js" type="text/javascript"></script>

...then instead of adding script tags like this...

<script src="/Scripts/General.es5.min.js" type="text/javascript"></script>

...you can add this...

@Html.Partial("~/Views/Shared/JsHelper.cshtml", "General")

When you are running the web site in Visual Studio, the uncompiled version of the Javascript file will be used. When running anywhere else (eg on the production server), the .es5.min.js version will be used.

As publishing a web project involves building it, which will compile the .js files, you can be confident that the compiled and minified files that are published are up-to-date.

This has the side-benefit that when debugging your scripts in the browser, you have access to the full version of the .js file, instead of the compiled and minified version that you would get if you referenced them directly. As another breaking change that occurred in the latest version of Web Compiler is that they no longer produce .map.js files when compiling, this is a huge side benefit.

Hope this helps.