對於一個應用來說界面的重要性無言而喻，而Web應用的界面是使用Html+Css以及Javascript實現的，ASP.NET MVC是一個用來構建Web應用的框架，它的界面也是Html實現的，對於一些開發團隊來說，一般Web項目會存在專業的UI前端工程師和後端工程師，前端工程師可能只懂設計和Html ...
對於一個應用來說界面的重要性無言而喻，而Web應用的界面是使用Html+Css以及Javascript實現的，ASP.NET MVC是一個用來構建Web應用的框架，它的界面也是Html實現的，對於一些開發團隊來說，一般Web項目會存在專業的UI前端工程師和後端工程師，前端工程師可能只懂設計和Html，但是對於如何將設計好的Html應用到ASP.NET可能就需要ASP.NET工程師的幫助。
本文將介紹如何將已經設計好的Web界面應用到ASP.NET MVC中以及如何對這些資源文件進行管理，先看一下修改後的效果：
本章的主要內容有：
● 素材選擇
● ASP.NET MVC的界面佈局及界面實現
● 使用BundleConfig進行素材資源管理
○ 使用bundle對素材分類
○ 使用Bundle對資源文件進行優化
○ 在Bundle中使用通配符及文件版本(min版)的選擇
○ 使用CDN
○ Bundle中的緩存
○ Bundle重寫樣式表中資源引用路徑
○ 自定義資源轉變(Transform)
● 小結
素材選擇
本文選取開源主題Start Bootstrap - Clean Blog為例進行介紹。
Clean Blog是一個現代風格的響應式主題，基於bootstrap 4.0，下圖為Clean Blog的運行效果：
將Clean Blog下載到本地並導入《My Blog》項目中，該主題中包含了相應的樣式表、圖片、Js、示例頁面等文件：
註：Clean Bolg的GitHub地址：https://github.com/BlackrockDigital/startbootstrap-clean-blog
ASP.NET MVC的界面佈局及界面實現
Clean Blog是由Html、Css、Javascript文件組成的一個靜態Web界面，要將其應用到ASP.NET MVC中，只需要對其結構進行分析後一一替換到ASP.NET MVC的View中即可。
所以首先要分析的是Clean Blog以及My Blog應用的頁面佈局，對於Clean Blog來說它分為三塊，分別是導航、內容以及頁腳：
同樣的My Blog之前使用的ASP.NET MVC預設模板也是分為了導航、內容和頁腳：
對於上面的佈局來說，導航和頁腳部分是不變的，只有中間的內容是變化的，在ASP.NET MVC中提供了佈局頁的機制，專門用來定義頁面佈局，將不變的內容放置在該佈局頁面上，所以要更換界面首先需要的就是定義佈局頁面：
在Views/Shared目錄下添加一個新的佈局頁面，將Clean Blog的Index頁面中的導航以及頁腳代碼複製到新的佈局頁面中，包括css以及js的引用（註：需要修改路徑），頁面內容部分使用@RenderBody()方法代替：
同時將_ViewStart.cshtml中指定的佈局文件改為新創建的CleanBlog佈局文件：
最後參照Clean Blog內容頁樣式完成相應內容頁面修改即可，下麵以“聯繫我們”頁面為例：
運行效果(註：沒有實現原主題中的信息提交功能)：
使用BundleConfig進行素材資源管理
通過上面的介紹知道瞭如何通過佈局頁面來搭建頁面內容，Web頁面除了本身的Html代碼外還少不了css、JavaScript等文件的支持，但這些文件都是相對零散的，在ASP.NET中有一個Bundle機制專門用於管理這些資源文件。
Bundle有捆和包的意思，而在ASP.NET MVC中它實際就是可以將一組css或JavaScript捆綁起來，捆綁可以根據資源的一些特性進行歸類，與此同時還添加了一些有用的附加功能，如：文件最小化、資源文件的版本管理、使用CDN加速、資源文件的緩存等等，下麵就介紹如何使用bundle來管理新添加到項目中的素材資源。
使用bundle對素材分類
為了保證頁面樣式一致，所以在創建佈局文件時添加了全站共用的樣式和腳本，Clean Blog是基於Bootstrap4.0建立的，除此之外還有一些特殊的內容，如下圖所示，它的實例代碼中已經進行過分類：
樣式主要包括Bootstrap的核心樣式、模板中使用的字體以及模板中的自定義樣式，同樣JavaScript除了bootstrap必要的JavaScript外還有自定義的JavaScript。根據這個分類規則，在App_Start/BundleConfig的BundleConfig類型中註冊分類：
樣式分類：
腳本分類：
註：建議bundle的地址以bundles作為首碼，避免與路由衝突。
完成後在佈局文件中改用Bundle渲染樣式和腳本：
使用Bundle對資源文件進行優化
前面通過Bundle對資源進行了分類，當同一類資源下存在多個文件時，頁面只需要一句代碼就可以全部引入使代碼更清晰，當然Bundle機制在資源分類的同時，更重要的是可以對資源文件進行優。
這裡的優化有兩個點分別是文件請求的優化和文件大小的優化，前者是將同一類的文件進行合併，合併成一個文件，在請求時只需請求一次即可，後者是將css及JavaScript中不需要的字元刪除、變數名稱簡寫以達到縮減文件尺寸的目的。
使用Bundle管理資源時，在Release模式下將自動進行優化，另外也可以設置BundleTable.EnableOptimizations為true進行強制優化，如下圖所示：
運行時將可以看到如下結果：
1. 請求數量減少：
2.非最小化的js文件被最小化，如clean-blog.js：
註：上面請求中出現字體文件無法找到的錯誤將在後續內容解釋。
在Bundle中使用通配符及文件版本(min版)的選擇
對於一些樣式或腳本組件來說，它本身就可能由多個文件構成，如下圖中的Jquery目錄中就有jquery.js以及jquery.slim.js兩個文件：
在一些複雜的應用中還可能會使用到jQuery的其它組件，這樣資源文件會更多，為了簡化Bundle對資源的歸類，在使用Bundle註冊分類時，可以使用通配符來一次匹配多個文件：
註：Bundle中能識別的通配符有兩種，常用的就是“*”，另外還可以通過“{version}”來匹配文件版本。更多通配符相關內容可參考：https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#using-the--wildcard-character-to-select-files
直接使用*通配符可以匹配相應目錄下的所有文件，下圖是運行結果：
從圖中可以看到，比之前的請求中多了一些js文件，這些文件就是通過通配符匹配到的，但要註意的是這裡沒有獲取包含.min版本的js文件，在相同目錄下clean-blog.js以及jquery.js都有被最小化的min版本：
Bundle機制會根據debug/release模式或者BundleTable.EnableOptimizations屬性來判斷是否對資源文件優化，在release模式(web.config中compilation的debug屬性為true)下或者BundleTable.EnableOptimizations設為true時會啟用資源優化，這裡的資源優化除了上面提到的多個文件捆綁外，如果文件列表中有min版本文件，那麼就會優先選擇min版本文件。
由於優化模式下無法看到具體請求的文件名稱，所以在clean-blog.min.js中添加一條日誌輸出代碼：
然後使用release模式運行程式，將會獲得下麵結果：
除了看到請求減少以外，還看到日誌中輸出了min版本文件中添加的內容，證明使用release模式運行時Bundle會自動選擇文件最小化的版本。
使用CDN
CDN(內容分髮網絡)，為了提高web的響應速度，其中一項主要的優化手段就是將靜態資源放到CDN上，這樣用戶就可以在離他最近的網路節點獲取到這些資源，這樣既提高了資源獲取的速度同時也降低了應用伺服器的壓力，ASP.NET中的Bundle可以為相應的資源配置CDN，並且該配置也是release模式下生效：
使用CDN主要有以下幾個步驟：
● 將bundles的UseCdn屬性設為true。
● 創建Bundle對象時構造方法中傳入CDN的路徑。
● 設置Bundle對象的CdnFallbackExpression屬性，該屬性用於判斷通過CDN載入的內容是否正確載入，如果沒有那麼會載入Include中的內容。
運行效果：
將bundles.CdnFallbackExpression的屬性設置為window.jQuery會生成一個判斷window.jQuery對象是否存在，如果不存在則獲取伺服器資源的代碼：
通過修改CDN資源路徑，模擬CDN無法訪問情況，它會自動載入可用的資源：
CDN可用資源參考：http://www.bootcdn.cn/
Bundle中的緩存
在Release或資源優化模式下，Bundle為其管理的資源提供了緩存機制，在第一次訪問Bundle管理的資源時，Bundle會為每一組資源生成一個唯一標識，然後將該資源預設緩存一年：
當資源發生改變時唯一標識會發生變化，那麼原來緩存的內容就自動失效了。
Bundle重寫樣式表中資源引用路徑
在前面的介紹的過程中release模式下一直有一個錯誤，就是無法找到字體文件，這是因為在編寫樣式時會引入一些字體或者圖片等外部資源，而這些資源一般是用相對路徑進行引用的，但是當ASP.NET中使用Bundle來對樣式資源進行捆綁時，該資源的url地址就發生改變了，導致使用該地址組合的引用資源的地址不正確，從而導致了資源無法載入：
為瞭解決這一問題，Bundle提供了一個重寫樣式引用相對路徑的解決方案，在將樣式表註冊到Bundle中時，可以為相應的樣式文件添加一個CssRewriteUrlTransform對象，它用於Css文件優化時對其引用的Url進行重寫：
添加以上代碼後，運行程式將解決字體無法找到的問題：
自定義資源轉變(Transform)
資源轉變是Bundle機制在優化資源時提供的一個可拓展介面，如上面介紹的css Url重寫就是資源轉變的拓展，Bundle中實現資源轉變需要實現以下介面：
介面中的參數分別代表獲取到文件的虛擬路徑和文件的內容。
下麵創建一個在css中插入自定義內容的資源轉換器，來介紹如何實現資源轉變的自定義拓展：
實現IItemTransform介面，在樣式文件中追加".test {color: red;}"樣式：
將該轉換器通過Include方法應用到對應文件上：
運行結果顯示相應內容已經被添加到最終的樣式文件中：
註：IItemTransform介面是在資源優化前調用的，所以本例添加內容包含的空格和分號最終都被優化刪除了，所以在使用IItemTransform進行拓展時需要註意資源優化問題。
另外在Bundle中還有另外一個拓展介面IBundleTransform，它定義了一個用於轉換Bundle相應文件的方法：
實現Process介面，在響應的內容上添加註釋“hello selim”：
BundleTransform需要在Bundle的Transforms屬性上添加：
運行結果：
相對與ItemTransform來說BundleTransform處理後的內容不會再進行優化，在文檔https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#less-coffeescript-scss-sass-bundling中還通過BundleTransform實現了less等文件動態編譯的功能，有興趣可參考該文檔。
小結
本章主要介紹瞭如何將現有的Web樣式應用到ASP.NET MVC中，並著重介紹了ASP.NET MVC中對靜態資源管理的Bundle機制。Bundle機制除了可以對資源文件進行歸類外還提供了資源文件優化、CDN、緩存等高級功能。合理的利用Bundle可以讓項目代碼更清晰，同時也可以提高應用的性能。
參考：
https://github.com/BlackrockDigital/startbootstrap-clean-blog
https://html.com/attributes/
https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification
https://www.codeproject.com/articles/842961/introducing-dynamic-bundles-for-asp-net-mvc
https://stackoverflow.com/questions/11355935/mvc4-stylebundle-not-resolving-images#
http://www.bootcdn.cn/
http://www.tutorialsteacher.com/mvc/scriptbundle-mvc
https://www.codeproject.com/Articles/728146/ASP-NET-MVC-bundles-internals
https://blogs.msdn.microsoft.com/rickandy/2011/05/21/using-cdns-and-expires-to-improve-web-site-performance/
本文鏈接：http://www.cnblogs.com/selimsong/p/8589175.html
