除了上面给出的答案外,我想提到有一个重要的步骤被遗忘了:
在安装了
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
这将允许您声明
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")
可以在这里找到更多信息。