您的位置:首页 > Web前端 > JavaScript

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

2015-06-17 14:24 387 查看
  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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: