探寻ASP.NET MVC鲜为人知的奥秘（1）：对LESS的支持_html/css_WEB-ITnose
想一下很久以前，我们在mvc2的时代，我们使用这样的方式引入js和css文件：
Why
刚开始没有什么问题，而随着我们项目的越来越大，需要引入的资源文件越来越多的时候，我们就难免会遇到以下这些问题：
- 需要在Production环境将这些文件替换为压缩版本(e.g jQuery.xxx.min.js)
- CSS文件需要借助其他工具去压缩
- 引入的文件越来越多，难以管理
- 大量的资源文件导致浏览器加载缓慢
而在ASP.NET MVC3空出世后，我们就再也不需要受到以上这些困扰了。
首先，当我们开启了Optimizations开关后，当Web.config文件中的System.Web/Compilation@debug设置为false的时候（在生产环境下，需要设置为false），我们在浏览器端获取到的资源文件将会是经过压缩和捆绑的。这样做的好处是：
- 减少了服务器端的流量，给服务器退烧（通过压缩）
- 自动缓存资源文件，服务器端不更改的话，不会重新加载（通过缓存机制）
- 由于大多浏览器限制了对一个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代码；
在生产环境下，浏览器得到的源码中会找到类似以下的代码：
打开这个路径，会得到已经编译过的CSS代码：
body{background-color:#f7f7f7} 而在Production环境下，回更近一步，将css中的空白字符去掉，使CSS文件更小，因为我的示例实际上就一样，所以看不出来差别。
这篇文章就到这里了，最近工作的事很闹心啊，做技术人的洁癖和敏感，很他妈要命！