Geek Answers Handbook

Does the website provide the ability to use the associated js file in production, but separate js files in development?

Setup:

I have a large SPA application that uses many JavaScript files that come bundled with the Web Essentials package in Visual Studio 2013 . Then I include the mini js files created by Web Essentials on my HTML page. This application does not use ASP.NET

Problem:

I would like to be able to distribute an HTML page with a single miniature script that is referenced for production, but separate unfinished scripts for development.

Causes:

Minimized scripts, even with map files, make debugging difficult. Variable and parameter names have been reduced, and therefore the debugger does not match the source. In addition, since everything is in one file, it is difficult to find for development.

Current solution:

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

Does web fundamentals help with a better solution than what I'm doing now that I just missed?

+5
source share
3 answers

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

To help see loose and unfinished JS and CSS, I created a rendering assistant based on whether the web application is running with debugging turned on.

see https://bundlerminifierhelper.codeplex.com/

Example:

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

Note. Using relative paths, including slashes (/)

When debugging of all input files will be displayed on the page, and when there is no debugging, the provided path will be displayed.

0
source

You are mixing a binding tool with a reference implementation.

Web Essentials 2013 builds nodes of compressed (reduced) JavaScript , CSS , LESS , SASS, and image files. Web Essentials should create a mini-package, regardless of whether you are in debug mode.

You are looking for a way to selectively reference minfied files in Release mode and originals in Debugging . This may mean more likely Razor coding to check the release version and render links.

The best solution is to use Merge and minimize ASP.NET .

It is easy to debug your JavaScript in the development environment (where the compilation element in the Web.config file is set to debug = "true"), because the JavaScript files are not linked or not reduced when debug = "true"

A minified bundle will exist if debug="true" in your Web.config. But at runtime, the structure will refer to the original files, not the miniature ones. Now your Web.config is responsible for indicating which version of your assets belong.

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

Note. Web Essentials 2015.0 removed binding and minimization.

Attention!

Web Essentials 2015 no longer contains functions for combining and minimizing JS, CSS, and HTML files, as well as compiling LESS, Scss, and CoffeeScript. These features have been ported to their own separate extensions, which greatly enhance the features.

A common practice is to use the ASP.NET Bundler . This is another reason to avoid joining Web Essentials.

+3
source

I'm not sure that web fundamentals can handle this scenario, although According to my current experience, the following are the things that I use to debug code locally during development -

  • For local debugging, if you use the ASP.NET build function and must specify file links in BundleConfig.cs. You can enable the browser to download each file as it is done by setting the flag BundleTable.EnableOptimizations = true; in the Global.asax file. And we upload one package file to work in the local environment.
  • For production, we use mini versions of file links.

for example, in your HTML, you can check how it is

@if (local) {

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

}

yet {

// What is partial HTML that contains links to small Html.RenderPartial files ("ClientTemplates / MinifiedScripts");

}

thanks

+1
source

More articles:


All Articles