Question

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

我正在创建一个与REST API通信的AngularJS站点。对于REST API，我使用的是ASP.NET Web API。我还创建了一个“ASP.NET空Web应用程序”。此项目中只有HTML，js和CSS文件（以及web.config）。我想将我的js和CSS文件捆绑和缩小，但我不想创建一个MVC项目来获得它。有可能吗？

Answer 1

绝对可以在空白项目中使用捆绑和缩小。

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

创建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")); 
    } 
}

在global.asax

中的应用程序start中注册BundleConfig类

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

引用HTML文档中的包。
通过禁用调试模式启用捆绑。

Answer 2

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

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

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

这需要添加到ASPX页面的主题部分，以便呈现捆绑包＆＃34;〜/ bundles / js＆＃34;和＆＃34;〜/ bundles / css＆＃34;之前添加到您的页面。没有它，它将不会出现（见why do I need render?）。它要求你添加

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

假设您已将NUGET包Microsoft.AspNet.Web.Optimization添加到代码中，

到页面的第2行以注册命名空间。

如果您想要包含更多相关文件，请执行

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");

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

重要事项：捆绑将检查您是处于调试模式还是发布模式。优化仅适用于删除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")

可以找到更多信息here.

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>

它将从View Engine保存您的页面。

Answer 4

要在SPA中获得文件加载速度，您需要在设置中手动操作。 错误的答案是实现Razor，特别是如果你的整个目标是远离MVC及其朋友（如果你的目标是AngularJS SPA，这是一件好事）。当你实现其他答案中提到的优化框架时，你现在必须点击View Engine来构建CSHTML文件，这对你的速度来说是一个明显的打击，可能比你认为你节省的更多。

就像我说的那样，您需要开发人员时间来最小化文件。您必须手动将它们发送到您拥有的CDN（或需要设置）。然后，您可以根据团队设置的自己的包引用您自己的CDN，并且该CDN将由用户的浏览器缓存。

然后，当您的一个或多个SPA需要指向更新的HTML / CSS / JS时，您可以在该SPA应用程序中增加CDN版本。其他SPA应用程序甚至可以与旧版本保持一致（但我建议尝试坚持使用最新版本的CDN＆＃39; s）。并且用户的浏览器将识别新的CDN版本并将新版本拉入缓存。

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 Extensions http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

你可以用户JSMIN http://www.crockford.com/javascript/jsmin.html

您可以将JsMin作为Post Build Event运行，如下所示 jsmin＆lt;“$（ProjectDir）\ debug.js”＆gt;“$（ProjectDir）\ min.js”

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

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

Answer 6

您还可以使用VS扩展WebEssentials minification，它可以独立于项目编译来缩小您的js / css文件（这样您就不需要任何第三方dll依赖项）。它也有捆绑，非常方便。

没有ASP.NET MVC的捆绑和缩小

6 个答案: