天天看點

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

基于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應用程式:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

在建立工程對話框,選擇ASP.NET 5.0 Starter Web

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

建立一個ASP.NET MVC 6 app,工程檔案結構如下:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

該工程下,包括如下重要的配置檔案:

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下,可使用智能感覺獲得可用包的清單:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

也可以獲得包版本号的智能提示

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

現在安裝最新包,在解決方案視圖,點選Dependencies,然後在Bower檔案夾上右擊單擊Restore Packages.

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

可通過Output 窗體檢視安裝的細節。 包被安裝到bower_components檔案夾。

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

Visual Studio會自動加載對應版本的包在您的解決方案中。這樣封包件就不用上傳到源碼管理下。

使用gruntfile.js 檔案來定義Grunt任務,預設的工程模闆包括了這樣的任務,如Bower包管理器。

下面我們使用Grunt來添加LESS處理、編譯過程。

在工程下,建立一個檔案夾assets。

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

在assets檔案夾上右鍵,選擇Add &gt; New Item. 在建立項對話框中,選擇LESS Style Sheet檔案,命名為“site.less”.

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

粘貼如下代碼到site.less檔案

使用@base 變量用于定義顔色值,這個變量被用于LESS的特性。

安裝task,建立一個Grunt task或者複用一個存在的.

在Grunt檔案中配置task.

綁定task到Visual Studio編譯任務中

在輸入的時候,同樣會看到可用包清單:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

同樣可智能感覺出版本号:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

在解決方案,點選Dependencies &gt; NPM,你可以看到<code>grunt-contrib-less已經被列出來,但是目前尚未安裝。</code>

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

點選右鍵,Restore Packages。

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

安裝完成的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>

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

通過選擇任務名稱“less”,點選Run運作:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

output視窗運作如下:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

打開/wwwroot/css/site.css檔案,可看到編譯後的CSS檔案如下:

運作程式,背景色已經被真實顔色修改了:

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

配置自動運作:通過Bindings &gt; After Build 即可配置自動運作。

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower開發Web程式

繼續閱讀