捆绑＆amp;在ASP.NET中缩小资产

Question

嘿，我总体上已经进入ASP.NET和.NET几周了。我在转换某些静态页面时遇到了一些问题，尤其是我的资产。

我已经可以说我做的事情很愚蠢，或者只是遗漏了什么，我道歉。

我正在尝试捆绑所有资产，我不确定这是不是很好。来自Ruby on Rails背景，当时似乎有意义。

到目前为止我做了什么并且有效：

• 我们所有的内部样式表和javascripts都捆绑在一起，缩小并作为生产中的一个文件。

我想做的事情：

• 捆绑我们所有的CDN并在我们的文件夹中制作本地副本。

这是BundleConfig.cs：

// Configuration for bundling CDN content
bundles.UseCdn = true;

// Bundling & Minifying Application wide Stylesheets & JavaScripts
bundles.Add(new StyleBundle("~/bundles/application").Include(
    "~/Content/application.css",
    "~/Content/reservations.css",
    "~/Content/accounts.css",
    "~/Content/pets.css"));

bundles.Add(new ScriptBundle("~/bundles/application").Include(
    "~/Scripts/application.js",
    "~/Scripts/reservations.js",
    "~/Scripts/pccounts.js",
    "~/Scripts/pets.js"));

// Bundling & Minifying Modernizer
bundles.Add(new ScriptBundle("~/bundles/modernizr", "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js").Include(
    "~/Scripts/modernizr-{version}.min.js"));

// Bundling & Minifying JQuery
bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js").Include(
    "~/Scripts/jquery-{version}.min.js"));

// Bundling & Minifying Font-Awesome
bundles.Add(new StyleBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css").Include(
    "~/Content/font-awesome-{version}.min.css"));

// Bundling & Minifying Bootstrap
bundles.Add(new StyleBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css").Include(
    "~/Content/bootstrap-{version}.min.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js").Include(
    "~/Scripts/bootstrap-{version}.min.js"));

// Bundling & Minifying SweetAlerts
bundles.Add(new StyleBundle("~/bundles/sweetalert", "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css").Include(
    "~/Content/sweetalert-{version}.min.css"));
bundles.Add(new ScriptBundle("~/bundles/sweetalert", "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js").Include(
    "~/Scripts/sweetalert-{version}.min.js"));

// Bundling & Minifying DataTables
bundles.Add(new StyleBundle("~/bundles/sweetalert", "https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css").Include(
    "~/Content/datatables-{version}.min.css"));
bundles.Add(new ScriptBundle("~/bundles/sweetalert", "https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js").Include(
    "~/Scripts/datatables-{version}.min.js"));

// Bundling & Minifying Bootstrap-Datepicker
bundles.Add(new StyleBundle("~/bundles/bootstrap-datepicker", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.min.css").Include(
    "~/Content/bootstrap-datepicker-{version}.min.css"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap-datepicker", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js").Include(
    "~/Scripts/bootstrap-datepicker-{version}.min.js"));

// Bundling & Minifying Bootstrap-Switch
bundles.Add(new StyleBundle("~/bundles/bootstrap-switch", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css").Include(
    "~/Content/bootstrap-switch-{version}.min.css"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap-switch", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js").Include(
    "~/Scripts/bootstrap-switch-{version}.min.js"));

// Bundling & Minifying Typeahead.js
bundles.Add(new ScriptBundle("~/bundles/typeahead", "https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js").Include(
    "~/Scripts/typeahead-{version}.min.js"));

然后在Shared / _Layout.cshtml中：

@Styles.Render("~/bundles/font-awesome")
@Styles.Render("~/bundles/bootstrap")
@Styles.Render("~/bundles/datatables")
@Styles.Render("~/bundles/sweetalert")
@Styles.Render("~/bundles/bootstrap-datepicker")
@Styles.Render("~/bundles/bootstrap-switch")
@Styles.Render("~/bundles/application")

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datatables")
@Scripts.Render("~/bundles/sweetalert")
@Scripts.Render("~/bundles/bootstrap-datepicker")
@Scripts.Render("~/bundles/bootstrap-switch")
@Scripts.Render("~/bundles/typeahead")
@Scripts.Render("~/bundles/application")

最后是结果的图像：

看起来它正在寻找GET localhost：port / bundles / *并且无法找到它们。

如果有人可以帮我理解发生的事情，我将非常感谢你应该做的事情。

Answer 1

你所做的只是削减资产。

您没有捆绑它们，因为您只是将每个css和js文件渲染为单个捆绑包。

为了捆绑，您希望将CSS（或JS）分组到一个包中 -

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
          "~/Content/themes/base/jquery.ui.core.css",
          "~/Content/themes/base/jquery.ui.resizable.css",
          ...
          "~/Content/themes/base/jquery.ui.theme.css"));

仅供参考： 您不想对CND文件进行管理和编制;它违背了在客户端缓存CDN文件的目的。如果您想使用 CDN ，请查看使用CDN 标题的this文章。