没有使用ASP.NET MVC实现的捆绑和压缩技术

Question

是否可以在没有MVC项目的情况下使用Microsoft.AspNet.Web.Optimization中的捆绑和缩小功能？

我正在创建一个与REST API通信的AngularJS站点。对于REST API，我正在使用ASP.NET Web API。 我还创建了一个“ASP.NET Empty Web Application”。 该项目中仅包含HTML、js和CSS文件（以及一个web.config）。 我希望我的js和CSS文件能够被捆绑和缩小，但我不想创建一个MVC项目来实现这一点。 这是可能的吗？

- Joel

---

由于它在asp.net.web.optimization中而不是在其中一个mvc程序集中，所以您应该能够 :) - Anders M.

@AndersM。但我需要添加某种.cs文件或配置来触发它吗？仅在web.config中将debug设置为false没有任何作用。 - Joel

说实话，我不知道，我以前从未使用过，但由于它是在asp.net程序集下而不是mvc和/或razor，因此也可以用于asp.net，我进行了快速的谷歌搜索http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx http://www.codeproject.com/Articles/692311/Bundling-and-Minification-ASP-NET http://surajdeshpande.wordpress.com/2013/08/28/bundling-and-minification-in-asp-net-4-5/ 祝编码愉快 - Anders M.

你需要渲染你所添加的样式和脚本，可以参考我下面的答案。 - Matt

Answer 1

在一个空项目中完全可以使用捆绑和压缩功能。

1. 使用Nuget安装包：Install-Package Microsoft.AspNet.Web.Optimization

2. 创建一个BundleConfig类并定义你的捆绑：

   using System.Web.Optimization;
   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
           bundles.Add(new ScriptBundle("~/bundles/js").Include(
                     "~/Scripts/*.js"));
           bundles.Add(new StyleBundle("~/bundles/css").Include(
                      "~/Styles/*.css")); 
       } 
   }
   

3. 在Global.asax中的应用程序启动中注册BundleConfig类

void Application_Start(object sender, EventArgs e)
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

4. 在HTML文档中引用捆绑包。
5. 通过禁用调试模式启用捆绑功能。

- Claies

---

感谢您的回答，我明白了。但是，我不得不将我的 index.html 更改为 index.cshtml，并在 cshtml 文件中添加 @using System.Web.Optimization，并手动创建一个 Global.asax 文件（因为之前没有这个文件）。 - Joel

@Joel 要支持在 cshtml 中使用 @using，需要添加与 Razor 相关的库，对吗？ - harishr

@Entre：它没有起作用，因为缺少一步，请查看我下面的补充答案：您需要通过调用渲染方法来呈现脚本和样式。 - Matt

这个想法不好的原因是成本。通过捆绑，你能省下什么？当然有一些可见的节省。但是现在你正在将你的SPA纯文本应用程序（HTML/CSS/JS）变成Razor应用程序，并且必须将你的html更改为cshtml或类似的东西。这意味着你也要使用视图引擎并构建页面，这比使用普通的HTML/CSS/JS节省的时间更长。相反，如果你真的认为需要它，请使用CDN来存储你的HTML/CSS/JS。 - Suamere

请参考stackoverflow.com/a/34508048/1545567，以使用来自纯HTML的捆绑包。 - Christophe Blin

Answer 2

除了上面给出的答案外，我想提到有一个重要的步骤被遗忘了：

在安装了Microsoft.AspNet.Web.Optimization NuGet包并在Global.asax中注册bundle（如Claies answer所述）之后，您需要添加以下样式和脚本的呈现方法：

<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

为了渲染之前添加到页面的"~/bundles/js"和"~/bundles/css"捆绑包，需要将此内容添加到ASPX页面的头部。如果没有添加，它将不会出现（请参见为什么需要渲染?）。您需要添加：

<%@ Import Namespace="System.Web.Optimization" %>

假设您已经在代码中添加了NUGET包Microsoft.AspNet.Web.Optimization，请将以下内容添加到页面的第二行以注册命名空间。

如果您想包含更多相关文件，请按照以下方式操作

void Application_Start()
{
    BundleCollection bundles=BundleTable.Bundles;
    var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js");
    bundles.Add(jsMattsBundle);
}

更简单地说

    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js",
            "~/Scripts/lib/jquery-ui.custom.min.js",
            "~/Scripts/lib/jquery.watermark.min.js");

这将把所有3个脚本捆绑在虚拟路径"~/bundles/MattsUIBundle/js"下。

---

重要提示：捆绑将检查您是否处于调试模式或发布模式。仅当您在web.config中删除调试标志时，优化才会应用。

<compilation debug="true" />

或者，如果你明确地在 Application_Start 中定义，你想要优化，无论是否处于调试模式：

BundleTable.EnableOptimizations = true;

同样地，如果您正在使用 CDN支持，请通过以下方式打开它：

BundleTable.Bundles.UseCdn = true;   //enable CDN support

这将允许您声明

var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));

请注意，CDN仅在发布模式下使用。以下脚本可确保在CDN加载失败时加载本地的jQuery副本：

    <%= Scripts.Render("~/bundles/jquery") %>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {
            var e = document.createElement('script');
            e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
            e.type = 'text/javascript';
            document.getElementsByTagName("head")[0].appendChild(e);
        }
    </script> 

假设您在“~/Scripts”提供了jQuery 1.7.1的本地副本。

---

注意：在MVC Razor语法中，呈现是在视图中完成的，如下所示：

@Scripts.Render("~/bundles/MattsUIBundle/js") 
@Styles.Render("~/bundles/css") 

可以在这里找到更多信息。

- Matt

Answer 3

@Matt，实际上您不需要添加

<%@ Import Namespace="System.Web.Optimization" %>
<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

您无需使用CSHTML模板。您可以从HTML页面以以下方式引用您的包：

<link href="bundles/css" rel="stylesheet"/>
<script src="bundles/MattsUIBundle/js"></script>

它将保护您的页面免受视图引擎的影响。

- Srost

Answer 4

为了加快SPA的文件加载速度，你需要在设置中手动投入时间。如果你的整个目标是远离MVC及其相关技术（如果你的目标是AngularJS SPA，这是一件好事），那么实施Razor是一个错误的选择。当你实现其他答案中提到的优化框架时，你现在必须访问View引擎来构建CSHTML文件，这对你的速度影响很大，可能比你想象的要更大。

所以，正如我所说，你需要开发人员的时间来最小化文件。你需要将它们手动发送到你拥有的CDN（或需要设置的CDN）。然后，你可以引用你自己团队设置的自己的包和CDN，并且该CDN将被用户浏览器缓存。

然后，当一个或多个SPA需要指向更新的HTML/CSS/JS时，你需要增加该SPA应用程序中的CDN版本。其他SPA应用程序甚至可以保持旧版本不变（尽管我建议尝试坚持使用最新版本的CDN）。用户的浏览器将识别新的CDN版本并拉取新版本进行缓存。

- Suamere

---

你能说一下如何在不使用 .cshtml 的情况下进行文件捆绑和压缩吗？有任何示例代码吗？ - Skull

你使用 GULP（或 Grunt）。使用 GULP，你可以轻松自动化捆绑和压缩操作，同时将 LESS 转换为 CSS 并移动文件。 - Suamere

Answer 5

您可以使用YUI或Google Clouser Mapper。

以下是如何在Visual Studio中使用YUI的示例。

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

这个链接有Visual Studio扩展程序 http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

您可以使用JSMIN http://www.crockford.com/javascript/jsmin.html

您可以像下面这样将JsMin作为后期构建事件运行 jsmin <"$(ProjectDir)\debug.js" >"$(ProjectDir)\min.js"

这是如何运行JSMIN的链接 http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

如果这回答了您的问题，请在左侧勾选。

- ineffable p

Answer 6

你也可以使用VS扩展WebEssentials minification，它可以独立于项目编译压缩你的js/css文件（因此你不需要任何第三方dll依赖）。它还有捆绑功能，非常方便。

- Anton Lyhin