你的位置:首页 > ASP.net教程

[ASP.net教程]Asp.net MVC CSS/Javascript Bundle 配置文件


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

  思路很简单,做一个

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

 

1)确定

<??><bundles ="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("").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()));          }        }      }    }  }

这段代码,写得比较粗暴,各位就将就看一下了,原理就是读取

3)Schema编写

因为是配置文件,做个Schema,这样用VS编写,也会有语法提示了,避免错误,XSD用

<??><xs:schema ="http://www.w3.org/2001/  targetNamespace="http://www.mobwiz.net/Schema/BundleConfig"  ="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