基于Visual Studio 2015,你可以:
友善的管理前端包,如jQuery, Bootstrap, 或Angular。
自動運作任務,如LESS、JavaScript壓縮、JSLint、JavaScript單元測試等。
友善的獲得Web開發者生态圈的工具包。
為了實作這些場景,Visual Studio 2015已經内置了一些流行的第三方工具包:
啟動Visual Studio 2015,建立一個ASP.NET 5.0的工程,選擇檔案-> 建立工程->Visual C#->Web->ASP.NET Web應用程式:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuUjY2MGZzYzMmJDNiJjYmlDM0QjN3MjNwIjYzIjY3QTYfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
在建立工程對話框,選擇ASP.NET 5.0 Starter Web
建立一個ASP.NET MVC 6 app,工程檔案結構如下:
該工程下,包括如下重要的配置檔案:
Project.json. 主工程檔案,NuGet 包依賴清單.
package.json. npm包清單.
bower.json. Bower包清單.
gruntfile.js. 配置Grunt任務.
wwwroot 檔案夾在ASP.NET 5.0中是新增的,工程中所有的靜态檔案存放于此。且用戶端可直接通路這些檔案,包括HTML檔案、CSS檔案、Images檔案、JavaScript檔案。wwwroot檔案夾是網站的根目錄,如這個域名<code>http://hostname/</code>指向wwwroot檔案夾。
代碼應該存放在wwwroot外,包括C#檔案、Razor檔案,既wwwroot檔案夾用于實作代碼檔案、靜态檔案的隔離。
編譯CoffeeScript or TypeScript 檔案為JavaScript.
編譯LESS or Sass 檔案為CSS.
壓縮JavaScript.
優化image檔案.
以上的操作會把wwwroot檔案夾外的代碼檔案進行編譯,然後拷貝到wwwroot檔案夾下,這樣前端即可通路。可通過任務排程自動執行這些步驟。
下面我們看看如何在Visual Studio 2015 中使用Bower進行前端包管理,在本節中,我們天津RequireJs類庫給app。
打開bower.json,在dependencies節添加requirejs入口。
在Visual Studio 2015下,可使用智能感覺獲得可用包的清單:
也可以獲得包版本号的智能提示
現在安裝最新包,在解決方案視圖,點選Dependencies,然後在Bower檔案夾上右擊單擊Restore Packages.
可通過Output 窗體檢視安裝的細節。 包被安裝到bower_components檔案夾。
Visual Studio會自動加載對應版本的包在您的解決方案中。這樣封包件就不用上傳到源碼管理下。
使用gruntfile.js 檔案來定義Grunt任務,預設的工程模闆包括了這樣的任務,如Bower包管理器。
下面我們使用Grunt來添加LESS處理、編譯過程。
在工程下,建立一個檔案夾assets。
在assets檔案夾上右鍵,選擇Add > New Item. 在建立項對話框中,選擇LESS Style Sheet檔案,命名為“site.less”.
粘貼如下代碼到site.less檔案
使用@base 變量用于定義顔色值,這個變量被用于LESS的特性。
安裝task,建立一個Grunt task或者複用一個存在的.
在Grunt檔案中配置task.
綁定task到Visual Studio編譯任務中
在輸入的時候,同樣會看到可用包清單:
同樣可智能感覺出版本号:
在解決方案,點選Dependencies > NPM,你可以看到<code>grunt-contrib-less已經被列出來,但是目前尚未安裝。</code>
點選右鍵,Restore Packages。
安裝完成的gruntfile.js 檔案如下所示:
initConfig方法
使用initConfig方法來配置Grunt任務。每個Grunt插件有他自己的配置項集合。如,我們可以配置grunt-contrib-less編譯為assets/site.less檔案,然後拷貝到wwwroot/css/site.css.
loadNpmTasks方法
從Grunt插件中加載任務,工程模闆預設通過這個來加載grunt-bower-task。下面添加一個<code>grunt-contrib-less。</code>
<code>在解決方案視圖,選擇gruntfile.js 右鍵Task Runner Explorer</code>
通過選擇任務名稱“less”,點選Run運作:
output視窗運作如下:
打開/wwwroot/css/site.css檔案,可看到編譯後的CSS檔案如下:
運作程式,背景色已經被真實顔色修改了:
配置自動運作:通過Bindings > After Build 即可配置自動運作。