探尋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文件更小，因為我的示例實際上就一樣，所以看不出來差別。

 

這篇文章就到這里了，最近工作的事很鬧心啊，做技術人的潔癖和敏感，很他媽要命！