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

基於Visual Studio 2015，你能夠：

• 方便的管理前端包，如jQuery, Bootstrap, 或Angular。

• 自動運行任務，如LESS、JavaScript壓縮、JSLint、JavaScript單元測試等。

• 方便的得到Web開發者生態圈的工具包。

爲了實現這些場景，Visual Studio 2015已經內置了一些流行的第三方工具包：

• Bower：Web包管理器，Bower能夠幫你安裝前端包，包括JavaScript、CSS類庫。對於服務器端包，請經過NuGet包管理。

• Grunt and Gulp：Grunt和Gulp是基於JavaScript的運行任務。如你未用過相似功能，能夠認爲這是一個自動調度運行的app，ASP.NET 5工程模板使用的是Grunt運行任務。

• npm (Node Package Manager). npm是一個node包管理器，最初被用於Node.js包管理。上面說的Bower、Grunt、Gulp用到了npm。

 

啓動Visual Studio 2015，新建一個ASP.NET 5.0的工程，選擇文件-> 新建工程->Visual C#->Web->ASP.NET Web應用程序：

 

在新建工程對話框，選擇ASP.NET 5.0 Starter Web

 

建立一個ASP.NET MVC 6 app，工程文件結構以下：

 

該工程下，包括以下重要的配置文件：

• Project.json. 主工程文件，NuGet 包依賴清單.

• package.json. npm包清單.

• bower.json. Bower包清單.

• gruntfile.js. 配置Grunt任務.

 

靜態文件和wwwroot

wwwroot 文件夾在ASP.NET 5.0中是新增的，工程中全部的靜態文件存放於此。且客戶端可直接訪問這些文件，包括HTML文件、CSS文件、Images文件、JavaScript文件。wwwroot文件夾是網站的根目錄，如這個域名http://hostname/指向wwwroot文件夾。

代碼應該存放在wwwroot外，包括C#文件、Razor文件，既wwwroot文件夾用於實現代碼文件、靜態文件的隔離。

• 編譯CoffeeScript or TypeScript 文件爲JavaScript.

• 編譯LESS or Sass 文件爲CSS.

• 壓縮JavaScript.

• 優化p_w_picpath文件.

以上的操做會把wwwroot文件夾外的代碼文件進行編譯，而後拷貝到wwwroot文件夾下，這樣前端便可訪問。可經過任務調度自動執行這些步驟。

{    "webroot": "wwwroot",    "version": "1.0.0-*",    // ...
 }

 

使用Bower來進行前端包管理

下面咱們看看如何在Visual Studio 2015 中使用Bower進行前端包管理，在本節中，咱們天津RequireJs類庫給app。

打開bower.json，在dependencies節添加requirejs入口。

"dependencies": {        "bootstrap": "~3.0.0",        "jquery": "~1.10.2",        "jquery-validation": "~1.11.1",        "jquery-validation-unobtrusive": "~3.2.2",        "requirejs": "^2.1"
    },

 

備註：bower版本語法模式是」major.minor.patch」. 在^2.1中，字符'^’指定最小版本號。'~1.10.2' 用於指定最小爲1.10.2版本，或者任何1.10的最新補丁。 更多細節，請查看Github：https://github.com/npm/node-semver.

在Visual Studio 2015下，可以使用智能感知得到可用包的列表：

 

也能夠得到包版本號的智能提示

 

如今安裝最新包，在解決方案視圖，點擊Dependencies，而後在Bower文件夾上右擊單擊Restore Packages.

 

可經過Output 窗體查看安裝的細節。 包被安裝到bower_components文件夾。

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

 

使用Grunt運行任務調度

使用gruntfile.js 文件來定義Grunt任務，默認的工程模板包括了這樣的任務，如Bower包管理器。

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

在工程下，建立一個文件夾assets。

在assets文件夾上右鍵，選擇Add > New Item. 在新建項對話框中，選擇LESS Style Sheet文件，命名爲「site.less」.

粘貼以下代碼到site.less文件

@base: teal;
body {
    background-color: @base;
}

使用@base 變量用於定義顏色值，這個變量被用於LESS的特性。

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

• 在Grunt文件中配置task.

• 綁定task到Visual Studio編譯任務中

 

在package.json文件中，配置grunt-contrib庫。

{    "version": "0.0.0",    "name": "MyApp",    "devDependencies": {        "grunt": "^0.4.5",        "grunt-bower-task": "^0.4.0",        // Add this:
        "grunt-contrib-less": "^0.12.0"
    }
}

在輸入的時候，一樣會看到可用包列表：

一樣可智能感知出版本號：

 

在解決方案，點擊Dependencies > NPM，你能夠看到grunt-contrib-less已經被列出來，可是目前還沒有安裝。

點擊右鍵，Restore Packages。

安裝完成的gruntfile.js 文件以下所示：

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: true
                }
            }
        },        // Add this JSON object:        less: {
            development: {
                options: {
                    paths: ["Assets"],
                },
                files: { "wwwroot/css/site.css": "assets/site.less" }
            },
        }
    });

    grunt.registerTask("default", ["bower:install"]);

    grunt.loadNpmTasks("grunt-bower-task");    // Add this line:
    grunt.loadNpmTasks("grunt-contrib-less");
};

initConfig方法

使用initConfig方法來配置Grunt任務。每一個Grunt插件有他本身的配置項集合。如，咱們能夠配置grunt-contrib-less編譯爲assets/site.less文件，而後拷貝到wwwroot/css/site.css.

loadNpmTasks方法

從Grunt插件中加載任務，工程模板默認經過這個來加載grunt-bower-task。下面添加一個grunt-contrib-less。

在解決方案視圖，選擇gruntfile.js  右鍵Task Runner Explorer

經過選擇任務名稱「less」，點擊Run運行：

 

output窗口運行以下：

 

打開/wwwroot/css/site.css文件，可看到編譯後的CSS文件以下：

body {
  background-color: #008080;
}

運行程序，背景色已經被真實顏色修改了：

配置自動運行：經過Bindings > After Build 便可配置自動運行。

 

 

原文連接：Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower