【转载】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文件了

实例下载

官方地址：

http://yuicompressor.codeplex.com/wikipage?title=Sample%20MSBuild.xml%20File&ProjectName=yuicompressor