【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS
在开发中编写的js、css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担。这就得每次发版本的时候,对js、js进行压缩,然后再发布。有没有什么办法,让代码到了服务器上边,它自己进行压缩呢?
有两种办法:
第一种,在css、js请求到来的时候读取一下相对应的文件,进行压缩后返回。此方法可以通过在Global.asax的Application_BeginRequest的事件中,进行处理,也可以在web.config中注册一个httpHandler进行处理。
第二种是在程序启动的时候,对全部css以及js进行压缩,压缩之后,每次访问都使用压缩后的文件即可。这种办法可以将js全部压缩到一个文件夹里边,不过需要注意一下文件的顺序。
压缩使用的是雅虎的压缩组件: Yahoo.Yui.Compressor.dll
由于第一种办法没能实现js压缩到一个文件,所以这里采用的是第二种方案。
压缩方法比较简单,首先引用Yahoo.Yui.Compressor.dll和EcmaScript.NET.modified.dll
压缩js
//文件内容 string strContent = File.ReadAllText(jsPath, Encoding.UTF8); //初始化 var js = new JavaScriptCompressor(strContent, false, Encoding.UTF8, System.Globalization.CultureInfo.CurrentCulture); //压缩该js strContent = js.Compress(); File.WriteAllText(jsPath, strContent, Encoding.UTF8);
压缩css
string strContent = File.ReadAllText(cssPath, Encoding.UTF8) //进行压缩 strContent = CssCompressor.Compress (strContent); File.WriteAllText(cssPath, strContent, Encoding.UTF8);
还有另外一一种办法不用自己写代码,每次网站发布的时候自动压缩指定的js和css文件:
1)在项目中新建“MSBuild” 文件夹,把yahoo压缩组件的两个dll放进去
2)在“文件夹”内新建"MSBuildCompressor.xml"文件:
<?xml version="1.0" encoding="utf-8" ?>
<Project xmlns="http://schemas.microsoft.com/developer/MsBuild/2003">
<UsingTask
TaskName="CompressorTask"
AssemblyFile="Yahoo.Yui.Compressor.dll" />
<!-- The .NET 2.0 version of the task .. and yes .. that's Model.Net20 folder listed twice .. i know i know...
<UsingTask
TaskName="CompressorTask"
AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model.Net20\Model.Net20\bin\Debug\Yahoo.Yui.Compressor.NET20.dll" />
-->
<!-- Define the output locations. These can be set via the msbuild command line using
/p:CssOutputFile=$(TargetDir)../whatever...
/p:JavaScriptOutputFile=$(TargetDir)../whatever...
If they are not supplied or are empty, then we the value whatever is supplied, below.
-->
<PropertyGroup>
<CssOutputFile Condition=" '$(CssOutputFile)'=='' ">
SylesSheetFinal.css
</CssOutputFile>
<JavaScriptOutputFile Condition=" '$(JavaScriptOutputFile)'=='' ">
JavaScriptFinal.css
</JavaScriptOutputFile>
</PropertyGroup>
<Target Name="MyTaskTarget">
<!--
ItemGroup\CssFiles or ItemGroup\JavaScriptFiles: add zero to many files you wish to include in this compression task.
Don't forget, you can use the wildcard (eg. *.css, *.js) if you feel up to it.
Finally, at least one item is required - either a css file or a js file.
CssFiles/JavaScriptFiles data format: Please do not touch this.
DeleteCssFiles: [Optional] True | Yes | Yeah | Yep | True | FoSho | FoSho. Default is False. Anything else is False. (eg. blah = false, xxxx111 = false, etc)
CssCompressionType: YuiStockCompression | MichaelAshsRegexEnhancements | HaveMyCakeAndEatIt or BestOfBothWorlds or Hybrid; Default is YuiStockCompression.
ObfuscateJavaScript: [Optional] refer to DeleteCssFiles, above.
PreserveAllSemicolons: [Optional] refer to DeleteCssFiles, above.
DisableOptimizations: [Optional] refer to DeleteCssFiles, above.
EncodingType: [Optional] ASCII, BigEndianUnicode, Unicode, UTF32, UTF7, UTF8, Default. Default is 'Default'.
DeleteJavaScriptFiles: [Optional] refer to DeleteCssFiles, above.
LineBreakPosition: [Optional] the position where a line feed is appened when the next semicolon is reached. Default is -1 (never add a line break).
(zero) means add a line break after every semicolon. (This might help with debugging troublesome files).
LoggingType: None | ALittleBit | HardcoreBringItOn; Hardcore also lists javascript verbose warnings, if there are any (and there usually is :P ).
ThreadCulture: [Optional] the culture you want the thread to run under. Default is 'en-gb'.
IsEvalIgnored: [Optional] compress any functions that contain 'eval'. Default is False, which means a function that contains
'eval' will NOT be compressed. It's deemed risky to compress a function containing 'eval'. That said,
if the usages are deemed safe this check can be disabled by setting this value to True.
-->
<ItemGroup>
<!-- Single files, listed in order of dependency
<CssFiles Include="../StylesheetSample1.css"/>
<CssFiles Include="../StylesheetSample2.css"/>
<CssFiles Include="../StylesheetSample3.css"/>
<CssFiles Include="../StylesheetSample4.css"/>-->
<JavaScriptFiles Include="../myjs/sample_1.js"/>
<!-- All the files. They will be handled (I assume) in alphabetically. -->
<!--<CssFiles Include="*.css" />
<JavaScriptFiles Include="*.js" />
-->
</ItemGroup>
<CompressorTask
CssFiles="@(CssFiles)"
DeleteCssFiles="false"
CssOutputFile="$(CssOutputFile)"
CssCompressionType="YuiStockCompression"
JavaScriptFiles="@(JavaScriptFiles)"
ObfuscateJavaScript="False"
PreserveAllSemicolons="False"
DisableOptimizations="Nope"
EncodingType="utf-8"
DeleteJavaScriptFiles="false"
LineBreakPosition="-1"
JavaScriptOutputFile="$(JavaScriptOutputFile)"
LoggingType="ALittleBit"
ThreadCulture="en-au"
IsEvalIgnored="false"
/>
<!--
CssFiles="@(CssFiles)"
DeleteCssFiles="false"
CssOutputFile="$(CssOutputFile)"
CssCompressionType="YuiStockCompression"
JavaScriptFiles="@(JavaScriptFiles)"
ObfuscateJavaScript="False" //是否模糊处理js文件,True:会将js中的变量为“a,b,c”单个字符的变量
PreserveAllSemicolons="False"
DisableOptimizations="Nope"
EncodingType="utf-8" //如果js或者css包含有中文,则必须使用utf-8编码,否则会乱码
DeleteJavaScriptFiles="false"
LineBreakPosition="-1"
JavaScriptOutputFile="$(JavaScriptOutputFile)"
LoggingType="ALittleBit"
ThreadCulture="en-au"
IsEvalIgnored="false"
-->
</Target>
</Project>
3)选择网站属性,切换到“生成事件”标签,,在“”输入以下命令:
$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuildCompressor.xml" /p:CssOutputFile="../miniFile/Sieena.min.css" /p:JavaScriptOutputFile="../miniFile/Sieena.min.js"
这样,每次编译网站的时候就会自动压缩指定的js和css文件了
官方地址:
【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS的更多相关文章
- Google Pagespeed,自动压缩优化JS/CSS/Image
Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...
- 给YUI Compressor添加右键命令,完成快捷压缩
YUI Compressor默认不带右键安装功能 YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱.可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命 ...
- JAVA使用YUI压缩CSS/JS
前言 JS/CSS文件压缩我们经常会用到,可以在网上找在线压缩或者本地直接使用,我这里使用的是yahoo开源组件YUI Compressor.首先介绍一下YUI Compressor,它是一个用来压缩 ...
- 使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GI ...
- asp.net mvc自动压缩文件,并生成CDN引用
很多站点都是用了静态文件分离.我推荐一种处理静态文件分离的方式. BundleExtensions.cs public static class BundleExtensions { public s ...
- ASP.NET RAZOR自动生成的js Timer
<input type="hidden" value="@(Model.TimeLength)" id="examTimeLength" ...
- ASP.NET 4.0 Webform Bundles 压缩css, js,为什么放到服务器不行
参考文章: http://blog.csdn.net/dyllove98/article/details/8758149 文章说的很详细. 但是本地是可以完美展示(我的本地环境有4.0 也有4.5) ...
- asp.net mvc项目实记-开启伪静态-Bundle压缩css,js
百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...
- iwebshop 自动给css js链接加版本信息
lib/core/tag_class.php case 'theme:': $path = $matches[4]; $exts = strtolower(substr($matches[4], st ...
随机推荐
- JDBC事务提交/回滚实例
以下是使用事务教程中描述的提交和回滚的代码示例. 此示例代码是基于前面章节中完成的环境和数据库设置编写的. 复制并将以下示例代码保存到:CommitAndRollback.java 中,编译并运行如下 ...
- 精选10款超酷的HTML5/CSS3菜单
今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...
- fopen flock fclose 文件用法
fopen函数是用来打开文件或者连接 若成功,则返回 true.若失败,则返回 false. fopen打开连接是不能直接输出的 使用: <?php $file = fopen("te ...
- JavaScript 使用穷举方式实现内容简繁转换
场景: 在Web开发中,有时存在对内容进行简体和繁体互相转换的需求,这时我们可以参考以下做法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- java中substring的用法
substring 1.public String substring(int beginIndex). 返回一个新的字符串,它是此字符串的一个子字符串.该子字符串始于指定索引处的字符,一直到 ...
- ABBYY FineReader 12中的用户模式你会用吗
在ABBYY FineReader 12OCR文字识别软件中,有一个概念叫“训练”,它是在字符图像和字符本身之间建立对应关系的过程,训练模式可以提高含有装饰字体的文档或包含特殊字符(例如数学符号)文档 ...
- 安装MongoDB 到服务器
用管理员身份运行CMD > cd C:\Program Files\mongodb\bin > C:\Program Files\mongodb\bin>mongod --dbpat ...
- less语法(一)变量与extend
摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...
- [Converge] Backpropagation Algorithm
Ref: CS231n Winter 2016: Lecture 4: Backpropagation Ref: How to implement a NN:中文翻译版本 Ref: Jacobian矩 ...
- Javascript生成GUID算法
var GUID = { date: new Date(), /* 生成GUID码 */ newGUID: function () { this.date = new Date(); var guid ...