asp.net mvc自动压缩文件,并生成CDN引用
很多站点都是用了静态文件分离。我推荐一种处理静态文件分离的方式。 BundleExtensions.cs
public static class BundleExtensions { public static string Version = "1.0.0"; public static string ScriptsPath = "Cdn"; public static Bundle Production(this Bundle bundle, string cdn, string root, string minified, string full = "") { var transform = new ScriptsBundleTransform() { Version = Version, ScriptsPath = System.IO.Path.Combine("~/", ScriptsPath, root), Minified = minified, Full = full }; bundle.Transforms.Add(transform); bundle.CdnPath = cdn + "/" + root + "/" + string.Format("{0}?{1}", minified, Version); return bundle; } }
ScriptsBundleTransform.cs
public class ScriptsBundleTransform : IBundleTransform { public string ScriptsPath { get; set; } public string Version { get; set; } public string Minified { get; set; } public string Full { get; set; } public ScriptsBundleTransform() { } public ScriptsBundleTransform(string path, string version, string minified, string full) { ScriptsPath = path; Version = version; Minified = minified; Full = full; } public void Process(BundleContext context, BundleResponse response) { string scriptsRoot = context.HttpContext.Server.MapPath(ScriptsPath); if (!Directory.Exists(scriptsRoot)) Directory.CreateDirectory(scriptsRoot); // if minified file name specified... if (!string.IsNullOrEmpty(Minified)) { using (TextWriter writer = File.CreateText(Path.Combine(scriptsRoot, Minified))) { writer.Write(response.Content); } } // if full file name specified... if (!string.IsNullOrEmpty(Full)) { using (Stream writer = File.OpenWrite(Path.Combine(scriptsRoot, Full))) { foreach (var file in response.Files) { file.VirtualFile.Open().CopyTo(writer); } } } } }
BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles) { bundles.UseCdn = true; BundleTable.EnableOptimizations = true; //制定压缩后的资源存储路径 BundleExtensions.ScriptsPath = "Resource"; //制定请求时代的后缀,为了刷新掉客户端的缓存 BundleExtensions.Version = "00001"; //CDN站点地址 const string ajaxCdnPath = "http://localhost/Cdn"; bundles.Add(new ScriptBundle("~/bundles/bootstrap") .IncludeFallback("$.fn.affix", "~/Resource/Scripts/common/transition.js", "~/Resource/Scripts/common/button.js", "~/Resource/Scripts/common/affix.js", "~/Resource/Scripts/common/tab.js", "~/Resource/Scripts/common/collapse.js", "~/Resource/Scripts/common/tooltip.js", "~/Resource/Scripts/common/respond.js") .Production(ajaxCdnPath, "Scripts", "bootstrap.mincdn.js", "bootstrap.src.js")); bundles.Add(new ScriptBundle("~/Content/bootstrap") .Include("~/Resource/Content/bootstrap.css") .Include("~/Resource/Content/common/button.css") .Include("~/Resource/Content/common/bootstrap-theme.css") .Production(ajaxCdnPath, "Content", "bootstrap.mincdn.css", "bootstrap.src.css")); }
这样的话就能生成 CDN 站点下的JS文件引用了
<script src="http://localhost/Cdn/Scripts/bootstrap.mincdn.js?00001"></script>
对了这里漏掉了一个地方,
http://localhost/Cdn站点需要你在IIS中指定到你站点的Resource下,不然访问不到你的JS文件。
但是如果CDN站点挂掉了怎么办,咱们继续:
SctiptsBundleExtensions.cs
public static class SctiptsBundleExtensions { public static ScriptBundle IncludeFallback(this ScriptBundle bundle, string cdnFallbackExpression, string virtualPath, params IItemTransform[] transforms) { bundle.CdnFallbackExpression = cdnFallbackExpression; bundle.Include(virtualPath, transforms); return bundle; } public static ScriptBundle IncludeFallback(this ScriptBundle bundle, string cdnFallbackExpression, params string[] virtualPaths) { bundle.CdnFallbackExpression = cdnFallbackExpression; bundle.Include(virtualPaths); return bundle; } }
bundles.Add(new ScriptBundle("~/bundles/jquery") .IncludeFallback("window.jQuery", "~/Resource/Scripts/common/jquery-{version}.js") .Production(ajaxCdnPath, "Scripts", "jquery.mincdn.js", "jquery.src.js"));
这样会生成如下的JS应用:
<script src="http://localhost/Cdn/Scripts/jquery.mincdn.js?00001"></script><script>(window.jQuery)||document.write('<script src="/dome/bundles/jquery"><//script>');</script>
这样的话当CDN站点挂掉了还是能够访问到JS文件的。
接下来CSS怎么处理呢:
StyleBundleExtensions.cs
public static class StyleBundleExtensions { /// <summary> /// Include a stylesheet to fallback to when external CdnPath does not load. /// </summary> /// <param name="bundle"></param> /// <param name="fallback">Virtual path to fallback stylesheet</param> /// <param name="className">Stylesheet class name applied to test DOM element</param> /// <param name="ruleName">Rule name to test when the class is applied ie. width</param> /// <param name="ruleValue">Value to test when the class is applied ie. 1px</param> /// <returns></returns> public static StyleBundle IncludeFallback(this StyleBundle bundle, string fallback, string className = null, string ruleName = null, string ruleValue = null) { if (String.IsNullOrEmpty(bundle.CdnPath)) { throw new Exception("CdnPath must be provided when specifying a fallback"); } if (VirtualPathUtility.IsAppRelative(bundle.CdnPath)) { bundle.CdnFallbackExpress(fallback); } else if (new[] { className, ruleName, ruleValue }.Any(String.IsNullOrEmpty)) { throw new Exception( "IncludeFallback for cross-domain CdnPath must provide values for parameters [className, ruleName, ruleValue]."); } else { bundle.CdnFallbackExpress(fallback, className, ruleName, ruleValue); } return bundle; } private static StyleBundle CdnFallbackExpress(this StyleBundle bundle, string fallback, string className = null, string ruleName = null, string ruleValue = null) { bundle.Include(fallback); fallback = VirtualPathUtility.ToAbsolute(fallback); bundle.CdnFallbackExpression = String.IsNullOrEmpty(className) ? String.Format(@"function() {{ var len = document.styleSheets.length; for (var i = 0; i < len; i++) {{ var sheet = document.styleSheets[i]; if (sheet.href.indexOf('{0}') !== -1) {{ var rules = sheet.rules || sheet.cssRules; if (rules.length <= 0) {{ document.write('<link href=""{1}"" rel=""stylesheet"" type=""text/css"" />'); }} }} }} return true; }}()", bundle.CdnPath, fallback) : String.Format(@"function() {{ var loadFallback, len = document.styleSheets.length; for (var i = 0; i < len; i++) {{ var sheet = document.styleSheets[i]; if (sheet.href.indexOf('{0}') !== -1) {{ var meta = document.createElement('meta'); meta.className = '{2}'; document.head.appendChild(meta); var value = window.getComputedStyle(meta).getPropertyValue('{3}'); document.head.removeChild(meta); if (value !== '{4}') {{ document.write('<link href=""{1}"" rel=""stylesheet"" type=""text/css"" />'); }} }} }} return true; }}()", bundle.CdnPath, fallback, className, ruleName, ruleValue); return bundle; } }
好吧后面的大家自己摸索吧:)上班了
很多代码是网上抄袭的,东拼西凑。
asp.net mvc自动压缩文件,并生成CDN引用的更多相关文章
- ASP.NET MVC 5 学习教程:生成的代码详解
原文 ASP.NET MVC 5 学习教程:生成的代码详解 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- ASP.NET MVC 导出CSV文件
ASP.NET MVC 导出CSV文件.直接贴代码 /// <summary> /// ASP.NET MVC导出CSV文件Demo1 /// </summary> /// ...
- Asp.Net Mvc自定义控件之树形结构数据生成表格 - WPF特工队内部资料
最近项目中有一个需求,将树形结构的数据,以表格的形式展示在页面中,下图是最终呈现效果: 源码: @{ Layout = null; } <!DOCTYPE html> <html&g ...
- Asp.Net MVC 文件管理Demo(文件展示,上传,下载,压缩,文件重命名等)
之前 ,有想做一个文件管理页面. 参考了 许多资料,终于完成了一个基于Asp.net MVC 的文件管理Demo.界面如下. 一,实现功能及相关技术 文件管理Demo基于Asp.NET MVC , ...
- ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3. 根目录下添加新 ...
- ASP.NET MVC实现Excel文件的上传下载
在应用系统开发当中,文件的上传和下载是非常普遍的需求.在基于.NET的C/S架构的项目开发当中,有多种方案可以实现文件的上传和下载(httpwebrequest.webclient等),而且多采用异步 ...
- asp.net MVC 自动下载apk
在Asp.net MVC中直接把.apk文件放入/Upload/App/ 路径下,然后通过IIS发布完之后,再通过http://xxx/Upload/App/xx.apk访问是访问不到的,因此不能下载 ...
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...
随机推荐
- hibernate框架学习第一天:hibernate介绍及基本操作
框架辅助开发者进行开发,半成品软件,开发者与框架进行合作开发 Hibernate3Hibernate是一种基于Java的轻量级的ORM框架 基于Java:底层实现是Java语言,可以脱离WEB,在纯J ...
- ionic配置
这个问题在升级ionic2的时候可能会遇到,不一定是windows,但是解决办法都是一样的,其实很简单,就是sass不支持当前的环境,那么在当前环境重新安装一下就好了 先卸载: npm uninsta ...
- QT 开发小记
1.开发socket网络通信时,需要在.pro 文件中添加 network项 QT += network 2. 报错: mutilple definition of 时,查看 .pro ...
- NO-CARRIER
自己动手写了创建虚拟接口,删除虚拟接口程序,频繁调用创建删除时,有时将接口up起来时会报错: Name not unique on network 利用ip link命令来查看接口(及其对应的索引) ...
- HNU 2015暑期新队员训练赛2 B Combination
先转化出求 Cnr中有多少奇数 其实就是 (n 的二进制数中 1 的个数为 k ,则这个奇数为 2 ^ k) 因为数很大, 故要快速求出区间的奇数 然后求 0 – low-1 的奇数, 0- high ...
- ls 命令
命令: ls 对应英文: list 作用: 查看当前文件夹下的内容 选项: -a 查看隐藏文件, 文件名前带 . 号的文件 -l 以详细列表形式显示 -h 人性化方式显示文件大小(注:-h必须和-l同 ...
- Python split()
split翻译为分裂. split()就是将一个字符串分裂成多个字符串组成的列表. split()当不带参数时以空格进行分割,当代参数时,以该参数进行分割. //---当不带参数时 example: ...
- android系统下消息推送机制
一.推送方式简介: 当前随着移动互联网的不断加速,消息推送的功能越来越普遍,不仅仅是应用在邮件推送上了,更多的体现在手机的APP上.当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数 ...
- python第一天,编写用户接口
作业:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 流程图: 代码 #!/usr/bin/env python #-*- coding:utf-8 -*- #created b ...
- 软件测试作业 - fault error failure
给出的题目如下: 我的解答如下: For program 1:1. where i > 0 is the fault , it should be changed to i>= 0 to ...