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.
優化image文件.

以上的操作會把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 即可配置自動運行。

理解了本節在Visual Studio 2015中使用Grunt、Bower開發Web程序的內容，能幫助大家更好的進行開發過程。那么在開發過程中，有哪些開發工具可以利用？ComponentOne Studio for ASP.NET 是ASP.NET平臺上的一整套完備的開發工具包，包含的Web窗體控件、MVC scaffolding模板以及HTML5/JavaScript頁面組件，僅通過幾行代碼就可以在系統中實現豐富的功能。

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

文章列表