探尋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
剛開始沒有什麼問題，而隨著我們專案的越來越大，需要引入的資原始檔越來越多的時候，我們就難免會遇到以下這些問題：
- 需要在Production環境將這些檔案替換為壓縮版本(e.g jQuery.xxx.min.js)
- CSS檔案需要藉助其他工具去壓縮
- 引入的檔案越來越多，難以管理
- 大量的資原始檔導致瀏覽器載入緩慢
How
而在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程式碼；
在生產環境下，瀏覽器得到的原始碼中會找到類似以下的程式碼：
<link href="/bundles/less?v=vnAgv976RJi72MAy6iBw7DhQ9yxBbhXMXY0yOqNN5BU1" rel="stylesheet"/>開啟這個路徑，會得到已經編譯過的CSS程式碼：
body{background-color:#f7f7f7}而在Production環境下，回更近一步，將css中的空白字元去掉，使CSS檔案更小，因為我的示例實際上就一樣，所以看不出來差別。
這篇文章就到這裡了，最近工作的事很鬧心啊，做技術人的潔癖和敏感，很他媽要命！