探尋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文件更小，由於個人示例實際上就同樣，因此看不出來差異。

 

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