Web Essentials 是否提供了一种在生产中使用捆绑的 js 文件但在开发中使用单个 js 文件的方法？

Question

设置：

我有一个大型 SPA 应用程序使用许多 JavaScript 个使用 Web Essentials 在 Visual Studio 2013 中捆绑的文件。然后，我将 Web Essentials 生成的缩小 js 文件包含在我的 HTML 页面上。此应用程序不使用 ASP.NET

问题：

我希望能够分发 HTML 页面，其中包含用于生产的单个缩小脚本，但用于开发的单个未缩小脚本。

原因：

即使是地图文件，缩小的脚本也很难调试。变量和参数名称已缩小，因此调试器与源代码不匹配。此外，由于所有内容都在一个文件中，因此很难进行开发。

当前解决方案：

我有一个 grunt 任务进入我的 html 文件并修改它以替换 <script> 标签。这有随着我添加到页面的每个文件而增长的缺点。

Web Essentials 是否提供了比我目前正在做的更好的解决方案，而我可能只是忽略了它？

Answer 1

我不确定 Web-essentials 是否可以处理这种情况根据我目前的项目经验，下面是我在开发时用来在本地调试代码的东西-

如果您使用 ASP.NET 捆绑功能并且必须在 BundleConfig.cs 中指定文件引用，则用于本地调试。您可以通过设置标志 BundleTable.EnableOptimizations=true; 使浏览器按原样加载每个文件；在 Global.asax 文件中。我们加载单个包文件以在本地环境中工作
对于生产，我们使用文件引用的缩小版本。

例如，在您的 HTML 中，您可以进行这样的检查

@if(本地){

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

}

其他{

//这是包含缩小文件引用的部分 HTML Html.RenderPartial("ClientTemplates/MinifiedScripts");

}

谢谢

Answer 2

您正在将捆绑工具与参考实现混合使用。

Web Essentials 2013 构建压缩包（缩小）JavaScript、CSS、LESS、SASS和图像文件。 Web Essentials 应该创建缩小包，无论您是否处于调试模式。

您正在寻找一种在 Release 模式下有选择地引用 minfied 文件和在 Debug 下引用原始文件的方法。这可能意味着涉及 Razor 编码以检查发布版本和渲染参考调用。

更好的解决方案是使用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"

如果您的 Web.config 中有 debug="true"，则压缩包仍然存在。但在运行时，框架将引用原始文件而不是缩小后的文件。您的 Web.config 现在负责维护引用的资产版本。

Web Essential 捆绑包是被动资产。 Web Essentials 中没有区分发布模式和调试模式的功能，因为这是运行时间操作。

注意：Web Essentials 2015.0 已删除捆绑和缩小。

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

通常的做法是使用 ASP.NET Bundler。这是避免与 Web Essentials 捆绑的另一个原因。

Answer 3

我刚刚使用了这里的 Bundler/Minifier：https://github.com/madskristensen/BundlerMinifier

为了帮助查看未绑定和未压缩的 JS 和 CSS，我创建了一个助手来根据 Web 应用程序是否启用了运行调试来呈现两者。

参见：https://bundlerminifierhelper.codeplex.com/

示例：

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

注意：使用相对路径，包括正斜杠 (/)

调试时，所有输入文件都将呈现到页面上，不调试时，将呈现提供的路径。

Web Essentials 是否提供了一种在生产中使用捆绑的 js 文件但在开发中使用单个 js 文件的方法？

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

javascript

visual-studio

bundling-and-minification

web-essentials