Does web essentials offer a way to use the bundled js file in production but individual js files in development?

Question

The Setup:

I have a large SPA app using many JavaScript files that are bundled using Web Essentials bundling in Visual Studio 2013. I then include the minified js files generated by Web Essentials on my HTML page. This application does not use ASP.NET

The problem:

I would like to be able to distribute the HTML page with a single minified script referenced for production but the individual unminified scripts for development.

Reasons:

The minified scripts even with the map files make it difficult to debug. Variable and parameter names have been minified and thus the debugger does not match the source. Additionally, since everything is in one file, its hard to look at for development.

Current solution:

I have a grunt task that goes into my html file and modifies it such that the <script> tags are replaced. This has the con of growing with every file I add to the page.

Does web essentials offer a better solution than what I am currently doing that I might have simply overlooked?

Answer 1

You are mixing the bundling tool with the reference implementation.

Web Essentials 2013 builds bundles of compressed (minified) JavaScript, CSS, LESS, SASS and image files. Web Essentials should create the minified bundle regardless whether you are in Debug mode.

You are looking for a way to selectively reference minfied files in Release mode and originals in Debug. That may mean rather involved Razor coding to check for release version and render reference calls.

A better solution is to use ASP.NET Bundling and Minification.

It's easy to debug your JavaScript in a development environment (where the compilation Element in the Web.config file is set to debug="true" ) because the JavaScript files are not bundled or minified when debug="true"

The minified bundle will still exist if debug="true" in your Web.config. But at run-time, the framework will reference the originals files instead of the minified. Your Web.config is now responsible for maintaining which version of your assets are referenced.

Web Essential bundles are passive assets. There is no functionality in Web Essentials to distinguish between Release and Debug mode because that is a run-time action.

---

Note: Web Essentials 2015.0 has removed bundling and minification.

Important!

Web Essentials 2015 no longer contains features for bundling and minifying of JS, CSS and HTML files as well as compiling LESS, Scss and CoffeeScript files. Those features have been moved to their own separate extensions that improves the features greatly

The common practice is to use the ASP.NET Bundler. This is another reason to get away from bundling with Web Essentials.

Answer 2

i ma not sure if Web-essentials can handle that scenario though As per my current project experience below are the things i use to debug the code locally while development-

1. For local debugging if you are using the ASP.NET bundling feature and must have specified the file references in the BundleConfig.cs. You can enable the browser to Load each file as is by Setting the flag BundleTable.EnableOptimizations=true; in the Global.asax file. And we load the single bundle file to work on local environment
2. For Production we use the minified versions of the file references.

eg in your HTML you can have a check like this

@if(local){

@Scripts.Render("~/Scripts/src/BundleName");

}

else{

//Which is an partial HTML which contains the minified file references Html.RenderPartial("ClientTemplates/MinifiedScripts");

}

Thanks