在手动升级ASP.NET MVC项目到MVC4之后,使用这些说明,如何设置ASP.NET Web Optimization Framework在MVC4中的新CSS和JavaScript资产捆绑和最小化功能?默认模板已经设置好了所有内容,但是如何手动完成呢?
Install-Package Microsoft.AspNet.Web.Optimization )。
- 在Web.config文件中,将以下内容添加到
<system.webServer>
,以允许使用无扩展名的URL提供缩小的捆绑包。
<code><handlers>
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</code>
- 在您的App_Start文件夹中,添加一个名为BundleConfig.cs的新类。它应该看起来像这样:
<code>using System.Web;
using System.Web.Optimization;
namespace MvcApplication1
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css"));
}
}
}
</code>
- 编辑上面的内容以添加所需的脚本和样式表束,然后将以下行添加到using部分和Global.asax.cs中的Application_Start:
<code>//using section
using System.Web.Optimization;
//Application_Start
BundleConfig.RegisterBundles(BundleTable.Bundles);
</code>
- 用
@Styles.Render("~/Content/css")
和@Scripts.Render("~/bundles/jquery")
替换_Layout.cshtml中CSS和JavaScript的<link>和<script> 标签,将参数替换为你在BundleConfig.cs中添加的捆绑包名称。确保不要将任何捆绑包命名为项目中的文件夹。
现在您应该准备好了 - 在此处阅读如何使用完整功能集:http://www.asp.net/mvc/overview/performance/bundling-and-minification
是的,按照以下步骤打包和压缩JS和CSS:
Install-Package Microsoft.AspNet.Web.Optimization
进入 global.asax,右键单击并查看代码
粘贴以下代码:
public static void MinifyJavaScriptAndCSS()
{
var scripts1 = new ScriptBundle("~/bundles/customJSBundle");
scripts1.Include("~/Scripts/script1.js");
scripts1.Include("~/Scripts/script2.js");
BundleTable.Bundles.Add(scripts1);
//Bundle Css
var css1 = new StyleBundle("~/bundles/customCSSBundle");
css1.Include("~/Styles/style1.css");
css1.Include("~/Styles/style2.css");
BundleTable.Bundles.Add(css1);
}
在 Application_Start() 中调用此方法
protected void Application_Start()
{
ApplicationHelper.MinifyJavaScript();
}
进入 Views/Shared/_Layout.cshtml
在 head 标签中添加以下行:
@ViewBag.Title - My ASP.NET Application @Styles.Render("~/bundles/customCSSBundle")
在 body 标签结束前添加以下代码:
//your code
@Scripts.Render("~/bundles/customJSBundle")
</body>
如果在 web.config 中设置 compilation debug=true,则文件不会被捆绑。 如果将其设置为 false,则文件将被捆绑。