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>

4）改動更新

這個還沒實現，思路是使用FileSystemWatcher 監視配置文件，如果文件發生改動，就重新載入這些配置。當然，也可以簡單粗暴 的直接重啟網站，這樣就重新載入了。

5）引用

這個沒變化，在頁面里用下面的代碼調用即可