探寻ASP.NET MVC不为人知的奥秘（1）：对LESS的支持

在ASP.NET MVC3中（从那时开始），咱们拥有了对js和css等文件的捆绑（Bundling）和压缩（Minification）的能力，这是ASP.NET性能优化工做的一部分。

想一下好久之前，咱们在mvc2的时代，咱们使用这样的方式引入js和css文件：

<script type="text/javascript" src="@Url.Content("~/Script/Script.js")"></script>

Why

刚开始没有什么问题，而随着咱们项目的愈来愈大，须要引入的资源文件愈来愈多的时候，咱们就不免会遇到如下这些问题：

1. 须要在Production环境将这些文件替换为压缩版本(e.g  jQuery.xxx.min.js)
2. CSS文件须要借助其余工具去压缩
3. 引入的文件愈来愈多，难以管理
4. 大量的资源文件致使浏览器加载缓慢

How

而在ASP.NET MVC3空出世后，咱们就不再须要受到以上这些困扰了。

首先，当咱们开启了Optimizations开关后，当Web.config文件中的System.Web/Compilation@debug设置为false的时候（在生产环境下，须要设置为false），咱们在浏览器端获取到的资源文件将会是通过压缩和捆绑的。这样作的好处是：

1. 减小了服务器端的流量，给服务器退烧（经过压缩）
2. 自动缓存资源文件，服务器端不更改的话，不会从新加载（经过缓存机制）
3. 因为大多浏览器限制了对一个host同时链接数量，因此加快了网站访问速度（经过捆绑）

如下是一个简单的示例，我这里用一个新建的ASP.NET MVC项目进行演示：

在新建一个MVC项目后，打开App_Start/BundleConfig.cs文件，能够看到一个静态的RegisterBundles方法，这个方法和RegisterRoutes方法同样，都是在应用程序在首次加载的时候调用的，也就是说，全部的捆绑和压缩的操做都会在应用程序加载的时候执行一次，之后会直接引用它，而当在应用程序启动后，人工干预了某个在捆绑中注册了的资源文件，MVC也只会去从新加载和压缩这一部分。

在这个RegisterBundles方法体内，能够设置BundleTable.EnableOptimizations静态属性，这个静态属性默认是设置为True的，也就是当网站在生产环境下，会对css和js等文件进行捆绑和压缩，而在开发模式下不会执行这些操做，固然你也能够经过设置为False组织它这种行为，

在方法体内，能够经过调用BundleCollection参数的Add方法增长咱们要捆绑的文件：

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

这里的”~/bundles/bootstrap“是一个虚拟的路径，当咱们在View文件中引用的时候，实际加载的是"~/Scripts/bootstrap.js"和"~/Scripts/respond.js"两个文件，Include方法的参数为一个字符串类型的参数组，因此咱们能够添加任意多个的文件，在View文件中使用以下方式进行应用：

@Scripts.Render("~/bundles/bootstrapr")

 

捆绑机制同时也支持CDN

var jqueryCdnPath = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js";

            bundles.Add(new ScriptBundle("~/bundles/jquery",
                        jqueryCdnPath).Include(
                        "~/Scripts/jquery-{version}.js"));

Focus came

而这篇文章要说的重点是，直接使用这种捆绑和压缩的机制完成LESS的编译，虽然咱们也可使用LESSCSS在浏览器端编译less，可是并不能获得编译过的CSS文件，而不少时候咱们须要获得它，判断是否是咱们预想的那样。

更多关于LESS的介绍以及LESS的优点，参见这里

首先，咱们须要添加dotless程序包：

以后，我在项目中Content目录下，添加一个StyleSheet1.less，代码以下：

@color:#F7F7F7;

body{
    background-color:@color;
}

这时候，您并不须要去担忧IIS会对less后缀的文件返回404，由于最终输出到客户端的是一个通过编译的CSS文件。

在BundleRegister方法中，添加以下代码：

var lessbundle = new Bundle("~/bundles/less").Include("~/Content/*.less");
            lessbundle.Transforms.Add(new LessTransform());
            lessbundle.Transforms.Add(new CssMinify());
            bundles.Add(lessbundle);

在代码第一行，咱们添加了对Content目录下全部后缀为less文件的捆绑，第二行添加了LESS的转换功能，这个功能就是由dotless提供的，第三行添加了对这一捆绑提供压缩的功能，这样咱们在Production环境下，就会获得编译而且压缩的css代码；

在生产环境下，浏览器获得的源码中会找到相似如下的代码：

<link href="/bundles/less?v=vnAgv976RJi72MAy6iBw7DhQ9yxBbhXMXY0yOqNN5BU1" rel="stylesheet"/>

打开这个路径，会获得已经编译过的CSS代码：

body{background-color:#f7f7f7}

而在Production环境下，回更近一步，将css中的空白字符去掉，使CSS文件更小，由于个人示例实际上就同样，因此看不出来差异。

 

这篇文章就到这里了，最近工做的事很闹心啊，作技术人的洁癖和敏感，很他妈要命！