5

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?

codetoast
  • 293
  • 1
  • 2
  • 9
  • If you are speaking of asp.net ScriptBundling feature, turning on/off debug mode in your web.config will affect the bundling of scripts. You can also use System.Web.Optimization.EnableOptimizations = true/false explicitly in your RegisterBundles method. – Ji_in_coding Jul 09 '15 at 17:24
  • Unfortunately I am not using ASP.net bundling. As an upgrade to my current solution I've gone a fully OS route and using browserify to manage what js files get minified and included on my page. This allows me the flexibility I need for debug vs release settings. – codetoast Jul 10 '15 at 21:53

3 Answers3

3

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.

Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101
  • Thanks for the great answer. The update on web essentials 2015 was especially helpful. Neither the razor solution or the ASP.NET bundler work for my project as I am not using ASP.NET. Its plain old html pages with plain old script references. I have updated the question to specify I am not using ASP.NET for the web pages. The SPA uses ASP.NET for Web API services however none of the views are made with Razor or ASP.Net – codetoast Jul 16 '15 at 20:49
  • @codetoast, in your case chrome debugger has a "prettify" tool that creates an "expanded" version of minified files. You can step through and set break points in the expanded version. – Dave Alperovich Jul 17 '15 at 17:51
1

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

HGrover
  • 225
  • 1
  • 10
0

I have just used the Bundler/Minifier from here: https://github.com/madskristensen/BundlerMinifier

To help see the unbunded and unminified JS and CSS I have created a helper to render both depending on whether the web application is running with debug enabled.

see: https://bundlerminifierhelper.codeplex.com/

Example: 

@Html.Bundle("/Content/Styles/Site.min.css")
@Html.Bundle("/Scripts/Scripts.min.js")

Note: Using relative paths, including the forward slash (/)

When debugging all the input files will be rendered out to the page, and when not debugging, the supplied path will be rendered out.

Mark Redman
  • 24,079
  • 20
  • 92
  • 147
  • 1
    This is a great tool. Thanks to Mads, and Mark for pointing it out. THis unfortunately came out a little to late for our project, however, for anyone else in the same boat, this is a good option. I also want to note that Task Runner Explorer, also Mads, along with gulp and various tools have provided an adequate solution for our product that is working out well thus far. – codetoast Nov 20 '15 at 14:32