ASP.NET下使用COMBRES对JS、CSS动态合并和压缩

[文章] 浏览(23)  | 2017年10月30日  | 支持服务 | 
[标签]软件开发,C#,Asp.Net
https://github.com/buunguyen/combres

支持:

ASP.NET 3.5-4.5
ASP.NET MVC 2-5

同时使用:

dotless 1.4.1.0
YUICompressor.NET 2.7.0.0
AjaxMin 5.14.5506.26202

第一步:安装(通过NuGet添加combres)

VS2012及以上版本

1、NuGet管理

工具-NuGet管理-在线
过滤:combres
找到combres,点击-安装

2、工具-NuGet命令

ASP.NET安装: PM> Install-Package combres
ASP.NET MVC安装:PM> Install-Package Combres.Mvc

完成之后在web根下会生成一个combres.readme,请先阅读。

在web\bin下引入:

Combres.dll
Combres.xml
dotless.Core.dll
Yahoo.Yui.Compressor.dll
AjaxMin.dll
fasterflect.dll
fasterflect.xml
WebActivatorEx.dll 依赖 Microsoft.Web.Infrastructure.dll

在Web\App_Data下生成:

combres.xml
combres_full_with_annotation.xml
combres_minimal.xml

网站配置web\web.config相关项:

<?xml version="1.0"?>
<configuration>
  <configSections>
    <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core"/>
    <section name="combres" type="Combres.ConfigSectionSetting, Combres"/>
  </configSections>
  <appSettings>
    <add key="CombresSectionName" value="combres"/>
  </appSettings>
  <system.web>
    <pages validateRequest="false" maxPageStateFieldLength="2048" controlRenderingCompatibilityVersion="4.0">
      <namespaces>
        <add namespace="Combres"/>
      </namespaces>
      <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
      </controls>
    </pages>
    <httpHandlers>
      <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
  <handlers>
      <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition=""/>
    </handlers>
  <combres definitionUrl="~/App_Data/combres.xml"/>
</configuration>

第二步:编辑App_Data/combres.xml文件, 添加所要用的JS 和 CSS

例子:

<?xml version="1.0" encoding="utf-8" ?>
<!--
  This file contains basic settings needed for most web apps.
  For full Combres settings (with explanation), refer to the sample definition file: combres_full_with_annotation.xml
  Also, refer to Combres' documentation: http://combres.codeplex.com/documentation    
-->
<combres xmlns='urn:combres'>
  <filters>
    <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
  </filters>
  <!--
    defaultDuration 默认缓存的时间,单位为天数。
    defaultVersion 合并后的资源版本,在你修改了资源文件后需要对版本进行修改,你可以指定auto或者手动设置一个版本号。
    defaultDebugEnabled true:对资源文件不压缩;false:对资源文件压缩。
  -->
  <resourceSets url="~/combres.axd"
                defaultDuration="30"
                defaultVersion="auto"
                defaultDebugEnabled="false" 
                defaultIgnorePipelineWhenDebug="true"
                localChangeMonitorInterval="30"
                remoteChangeMonitorInterval="60"
                >
    <resourceSet name="siteCss" type="css">
      <resource path="~/Style/css/style.css" />
    </resourceSet>
    <resourceSet name="siteJs" type="js">
      <resource path="~/Script/jquery-1.7.2.js" />
     </resourceSet>
  </resourceSets>
</combres>

第三步(页面使用)

Html页面 default.aspx

<%@ Page Language="C#" CodeFile="default.aspx.cs" Inherits="_default"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <title>default</title>
    <asp:PlaceHolder ID="phHeadScript" runat="server"></asp:PlaceHolder>
</head>
...

后台 default.aspx.cs

using Combres;
...
public partial class _default: System.Web.UI.Page
{
        // using Combres; 前台无须引用 <%@ Import Namespace="Combres" %> 因Combres名字空间是全局的
        htm.Text = WebExtensions.CombresLink("siteCss");
        htm.Text += WebExtensions.CombresLink("siteJs");
        phHeadScript.Controls.Clear();
        phHeadScript.Controls.Add(htm);
}

呈现Html页面

<head id="Head1">
    <meta charset="utf-8">
    <title>default</title>
    <link rel="stylesheet" type="text/css" href="/combres.axd/siteCss/-794726367/">
    <script type="text/javascript" src="/combres.axd/siteJs/1123579001/"></script>
</head>
...

 

附件说明
附件