是一个轻易压缩与合并CSS与JavaScript文件的组件。同时它还使用处理css. 它依赖组件是:
Dependencies
Id
Version Range(≥ 1.7.0.0)
(≥ 1.2.2.0)
(≥ 4.46.4422.26284)
(≥ 2.1.1)
不过不用担心,依赖会自动安装的,你可以使用Command-Line安装它。
PM> Install-Package SquishIt -Version 0.8.6
使用起来也很方便。修改web.config其中 debug 为 false
在Asp.net MVC 3 中的View 可以这么用,最后将生成一个合并前所以有JS的名为combine开头的文件。
@Html.Raw(Bundle.JavaScript().Add("~/Scripts/jquery-1.5.1.js").Add("~/Scripts/jquery.validate.js").Add("~/Scripts/jquery.validate.unobtrusive.js") .Render("~/Scripts/combined#.js"))
通过FireBug可以看到只有一个Js的请求,这个文件合并了其它文件。
对比之前需要3个js的请求,现在只需要一个了,并且还压缩过。 CSS文件可以这样:
@Html.Raw(Bundle.Css() .Add("~/Content/Site.css") .Add("~/Content/RiskSite.css") .Render("~/Content/combined#.css"))
最后页面只请求
同样这个文件是合并了其它css文件,并压缩了它们。
如果想避免生成这些文件在磁盘上,让它们运行时生成。 以CSS为例,需要做一些扩展。官方已经开始做了,以后会有的。
需要在Global.asax中:
protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); Bundle.Css() .Add("~/Content/Site.css") .Add("~/Content/RiskSite.css").AsCached("main","~/Security/Css/main"); }
然后在新建一个BaseController,增加两个Action,类似这样:
public class BaseController : Controller{ public ActionResult Js(string id) { // Set max-age to a year from now Response.Cache.SetMaxAge(TimeSpan.FromDays(365)); // In release, the cache breaker is appended, so always return 304 Not Modified Response.StatusCode = 304; return Content(Bundle.JavaScript().RenderCached(id), "text/javascript"); } public ActionResult Css(string id) { // Set max-age to a year from now Response.Cache.SetMaxAge(TimeSpan.FromDays(365)); // In release, the cache breaker is appended, so always return 304 Not Modified Response.StatusCode = 304; return Content(Bundle.Css().RenderCached(id), "text/css"); }}
在实际Controller继承这个BaseController:
public class SecurityController : BaseController { //...}
接下来在View中,MvcRenderCachedAssetTag方法在SquishIt.Mvc.dll里, 改写为:
@Bundle.Css().MvcRenderCachedAssetTag("main")
有兴趣还可写一个Razor扩展,类似的代码像这样
//Rzr.cshtml
@helper Css(string key) { @Bundle.Css().MvcRenderCachedAssetTag(key)}@helper Js(string key) { @Bundle.Javascript().MvcRenderCachedAssetTag(key)}// In a view...@Rzr.Css("main")@Rzr.Js("main")
完了,然后运行页面:
在Html中,显示:
这是一个动态生成的Css,完了,就这么简单。您可根据自己的情况修改组件。
希望对您Web开发有帮助。您可以感兴趣的文章:
作者: 出处: 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 该文章也同时发布在我的独立博客中-。