Asp.Net MVC4 BundleTable 之 Javascript和css 打包压缩
2013-01-14 16:40
381 查看
1、首先我们创建一个Asp.Net MVC4 项目,项目模板选择 Internet application;
发现Global.asax 文件有所变化,较之以前的版本可谓清新养眼:
原来是把不同的配置放到了相应的静态方法中去了,这些类都在App_Start目录下面;
2、我们重点看一下BundleTable
也就是 App_Start 目录下的 BundleConfig.cs;
3、打包压缩脚本:
代码:
页面使用方法:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
呈现形态:
WebConfig设置为:<compilation debug="false" targetFramework="4.0"/>
<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>
<script src="/bundles/jqueryui?v=5dJynsVuw00cy-rGv-qNSIrreIZxzp0Zuknkbqgbx-s1"></script>
<script src="/bundles/jqueryval?v=-tc2QZUKsI5XsBJSyox6jU38dSPE468EEX0oQlQTeSE1"></script>
使用CND
4、打包压缩CSS
代码:
页面使用方法:
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
呈现形态:
WebConfig设置为:<compilation debug="false" targetFramework="4.0"/>
<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>
<link href="/Content/themes/base/css?v=ps9Ga9601PrzNA2SK3sQXlYmNW3igUv5FOdOPWptyus1" rel="stylesheet"/>
注意事项:
如果Css中使用的图片采用了相对定位,要注意 打包前和打包后的相对位置变化:
如: /Content/themes/base/css 和 /Content/themes/base/jquery.ui.dialog.css 没有变化;
多个css打包时如果还是采用相对位置的资源,也应该是想对位置相同的css打包到一起;
5、排除列表:
bundles.IgnoreList 默认包含以下项目,以下项目添加之后自动被忽略;
Pattern ".intellisense.js" string
Pattern "-vsdoc.js" string
Pattern ".debug.js" string
Pattern ".min.js" string
Pattern ".min.css" string
如:bundles.Add(new ScriptBundle("~/bundles/myscript").Include( "~/Scripts/myscript-min.js")); 默认将背忽略。
自定义排除列表:
发现Global.asax 文件有所变化,较之以前的版本可谓清新养眼:
public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); AuthConfig.RegisterAuth(); } }
原来是把不同的配置放到了相应的静态方法中去了,这些类都在App_Start目录下面;
2、我们重点看一下BundleTable
BundleConfig.RegisterBundles(BundleTable.Bundles);
也就是 App_Start 目录下的 BundleConfig.cs;
3、打包压缩脚本:
代码:
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*"));
页面使用方法:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
呈现形态:
WebConfig设置为:<compilation debug="false" targetFramework="4.0"/>
<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>
<script src="/bundles/jqueryui?v=5dJynsVuw00cy-rGv-qNSIrreIZxzp0Zuknkbqgbx-s1"></script>
<script src="/bundles/jqueryval?v=-tc2QZUKsI5XsBJSyox6jU38dSPE468EEX0oQlQTeSE1"></script>
使用CND
bundles.UseCdn = true; bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js").Include( "~/Scripts/jquery-{version}.js"));
4、打包压缩CSS
代码:
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", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css"));
页面使用方法:
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
呈现形态:
WebConfig设置为:<compilation debug="false" targetFramework="4.0"/>
<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>
<link href="/Content/themes/base/css?v=ps9Ga9601PrzNA2SK3sQXlYmNW3igUv5FOdOPWptyus1" rel="stylesheet"/>
注意事项:
如果Css中使用的图片采用了相对定位,要注意 打包前和打包后的相对位置变化:
如: /Content/themes/base/css 和 /Content/themes/base/jquery.ui.dialog.css 没有变化;
多个css打包时如果还是采用相对位置的资源,也应该是想对位置相同的css打包到一起;
5、排除列表:
bundles.IgnoreList 默认包含以下项目,以下项目添加之后自动被忽略;
Pattern ".intellisense.js" string
Pattern "-vsdoc.js" string
Pattern ".debug.js" string
Pattern ".min.js" string
Pattern ".min.css" string
如:bundles.Add(new ScriptBundle("~/bundles/myscript").Include( "~/Scripts/myscript-min.js")); 默认将背忽略。
自定义排除列表:
bundles.IgnoreList.Clear(); bundles.IgnoreList.Ignore("*-vsdoc.js"); bundles.IgnoreList.Ignore("*intellisense.js");
相关文章推荐
- 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,App_Start/BundleConfig.cs来打包压缩js和css
- MVC中JavaScript和CSS的自动打包与压缩
- 在MVC中使用Bundle打包压缩js和css
- ASP.NET MVC 4使用Bundle的打包压缩JS/CSS
- ASP.NET MVC使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)
- ASP.NET MVC中使用Bundle打包压缩js和css的方法
- ASP.NET MVC中使用Bundle打包压缩js和css的方法
- HTML/CSS/Javascript/json代码在线压缩&格式化常用工具
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
- JsCompressor 压缩混淆JS(Javascript)与CSS
- JAWR【一个java项目的javascript和CSS集成和压缩工具】
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能