Asp.net MVC CSS/Javascript Bundle 配置文件

　　Asp.net mvc 中使用 Web Optimization 可以合并、压缩JS和CSS文件，但是每次修改都要改代码 ~/App_Start/BundleConfig.cs ，遂有了将它挪到配置文件的想法

　　思路很简单，做一个XML配置文件来保存。

　　首先，了解一下Bundle有两种，一种是StyleBundle，一种是ScriptBundle，所以配置文件中，需要支持两种；Bundle下的文件，把文件路径加进来就ok了

 

1）确定XML格式，如下：

<?xml version="1.0" encoding="utf-8" ?>
<bundles xmlns="http://www.mobwiz.net/Schema/BundleConfig">
  <cssbundles>
    <bundle>
      <name>~/content/backstage</name>
      <files>
        <file>~/Content/bootstrap.min.css</file>
        <file>~/Content/bootstrap-theme.min.css</file>
        <file>~/Content/bootstrap-datetimepicker.min.css</file>
        <file>~/Content/treetable/jquery.treetable.css</file>
        <file>~/Content/treetable/jquery.treetable.theme.default.css</file>
        <file>~/Content/admin.css</file>
        <file>~/Content/uploadify.css</file>
      </files>
    </bundle>
    <bundle>
      <name>~/content/portal</name>
      <files>
        <file>~/Content/bootstrap.min.css</file>
        <file>~/Content/bootstrap-theme.min.css</file>
        <file>~/Content/portal.css</file>
      </files>
    </bundle>
  </cssbundles>
  <scriptbundles>
    <bundle>
      <name>~/script/backjs</name>
      <files>
        <file>~/Scripts/jquery-1.11.2.min.js</file>
        <file>~/Scripts/bootstrap.min.js</file>
        <file>~/Scripts/jquery.cookie.js</file>
        <file>~/Scripts/jquery.validate.min.js</file>
        <file>~/Scripts/jquery.validate.unobtrusive.min.js</file>
        <file>~/Scripts/jquery.validate.unobtrusive.bootstrap.min.js</file>
        <file>~/Scripts/jquery.treetable.js</file>
        <file>~/Scripts/jquery.uploadify.min.js</file>
        <file>~/Scripts/json2.js</file>
        <file>~/Scripts/jquery.autosize-min.js</file>
        <file>~/Scripts/jquery.ba-bbq.js</file>
        <file>~/Scripts/mwext.js</file>
        <file>~/Scripts/jquery.uploadify.min.js</file>
        <file>~/Scripts/moment.min.js</file>
        <file>~/Scripts/moment-with-locales.min.js</file>
        <file>~/Scripts/bootstrap-datetimepicker.min.js</file>
        <file>~/Scripts/bootstrap-treeview.min.js</file>
      </files>
    </bundle>
    <bundle>
      <name>~/script/keditor</name>
      <files>
        <file>~/kindeditor/kindeditor-all-min.js</file>
        <file>~/kindeditor/lang/zh_CN.js</file>
      </files>
    </bundle>
    <bundle>
      <name>~/script/fixie</name>
      <files>
        <file>~/Script/html5shiv.min.js</file>
        <file>~/Script/respond.min.js</file>
      </files>
    </bundle>
  </scriptbundles>
</bundles>

2）读取代码

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            var path = HttpContext.Current.Server.MapPath("~/App_Data/bundles.config");

            XElement rootEL = XElement.Load(path);
            XNamespace ns = rootEL.Attribute("xmlns").Value;
            Debug.Assert(rootEL != null);

            var cssBundles = rootEL.Element(ns + "cssbundles");
            if (cssBundles != null && cssBundles.HasElements)
            {
                var list = cssBundles.Elements(ns + "bundle");

                if (list != null)
                {
                    foreach (var xElement in list)
                    {
                        var name = xElement.Element(ns + "name").Value;

                        var files = xElement.Element(ns + "files").Elements(ns + "file");
                        var fileList = new List<string>();
                        foreach (var element in files)
                        {
                            fileList.Add(element.Value);
                        }
                        bundles.Add(new StyleBundle(name).Include(fileList.ToArray()));
                    }
                }
            }

            var scriptBundles = rootEL.Element(ns + "scriptbundles");
            if (scriptBundles != null && scriptBundles.HasElements)
            {
                var list = scriptBundles.Elements(ns + "bundle");
                if (list != null)
                {
                    foreach (var xElement in list)
                    {
                        var name = xElement.Element(ns + "name").Value;
                        var files = xElement.Element(ns + "files").Elements(ns + "file");
                        var fileList = new List<string>();
                        foreach (var element in files)
                        {
                            fileList.Add(element.Value);
                        }
                        bundles.Add(new ScriptBundle(name).Include(fileList.ToArray()));
                    }
                }
            }
        }
    }

这段代码，写得比较粗暴，各位就将就看一下了，原理就是读取xml中的配置，然后添加到BundleConfig中去

3）Schema编写

因为是配置文件，做个Schema，这样用VS编写，也会有语法提示了，避免错误，XSD用XML Spy做的，本来想上传文件的，结果没找到怎么插入一个附件，就贴代码了，复制，保存到一个xsd，放到VS 的 Schema目录下，就 ok了。

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
    targetNamespace="http://www.mobwiz.net/Schema/BundleConfig"
    xmlns="http://www.mobwiz.net/Schema/BundleConfig"
     elementFormDefault="qualified" attributeFormDefault="unqualified">
    <xs:element name="bundles">
        <xs:annotation>
            <xs:documentation>Root element for bundles</xs:documentation>
        </xs:annotation>
        <xs:complexType>
            <xs:all>
                <xs:element name="cssbundles">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element name="bundle" type="bundleType" maxOccurs="unbounded"/>
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
                <xs:element name="scriptbundles">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element name="bundle" type="bundleType" maxOccurs="unbounded"/>
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:all>
        </xs:complexType>
    </xs:element>
    <xs:complexType name="bundleType">
        <xs:annotation>
            <xs:documentation>Bundle Type</xs:documentation>
        </xs:annotation>
        <xs:sequence>
            <xs:element name="name" type="xs:string"/>
            <xs:element name="files">
                <xs:complexType>
                    <xs:sequence>
                        <xs:element name="file" type="xs:string" maxOccurs="unbounded"/>
                    </xs:sequence>
                </xs:complexType>
            </xs:element>
        </xs:sequence>
    </xs:complexType>
</xs:schema>

View Code

 

4）改动更新

这个还没实现，思路是使用 FileSystemWatcher 监视配置文件，如果文件发生改动，就重新载入这些配置。当然，也可以简单粗暴 的直接重启网站，这样就重新载入了。

5）引用

这个没变化，在页面里用下面的代码调用即可 

@Styles.Render("~/content/backstage")
@Scripts.Render("~/script/backjs")

 

2015.06.17