ASP.NET5之客戶端開發：Grunt和Gulp構建工具在Visual Studio 2015中的高效的應用

本文轉載自查看原文 2015-05-30 08:39 2361 Gulp/ Visual Studio 2015/ ASP.NET5/ Grunt

Grunt和Gulp是Javascript世界里的用來做自動壓縮、Typescript編譯、代碼質量lint工具、css預處理器的構建工具，它幫助開發者處理客戶端開發中的一些煩操重復性的工作。Grunt和Gulp都在Visual studio 2015中得到支持。ASP.NET 項目模板默認使用Gulp。

Grunt和Gulp

Grunt和Gulp有什么區別？Gulp雖然是稍微晚一點登場的，但是它因crisp performance和優雅的語法受到歡迎。與Grunt不同，Grunt往往在硬盤上是讀寫文件，Gulp使用流式的API去鏈式的調用方法，Grunt是早些出現的客戶端構建工具，Grunt預定義了大多數經常要做的壓縮和單元測試等工作。Grunt每天都有數以千計的下載和應用。

使用Grunt

這個實例使用Empty ASP.NET項目模板來展示自動化的客戶端構建工作。非空的ASP.NET項目模板默認使用Gulp。

最終示例清理目標部署目錄，合並Javascript文件，檢查代碼質量，壓縮Javascript文件內容並且部署到web項目的跟目錄，我們將使用以下包：

grunt:任務執行者包；

grunt-contrib-clean:一個用來移除文件和目錄的任務

grunt-contrib-jshint:一個審查代碼質量的任務

grunt-contrib-concat:一個連接多文件在一個文件中的任務

grunt-contrib-uglify:一個壓縮和縮小文件尺寸的任務

grunt-contrib-watch:一個檢測文件活動的任務

准備項目

首先，創建信的空的Web應用程序添加示例的Typescript文件，Typescript文件在Visual Studio 2015的默認設置下，會自動地編譯為Javascript中並且作為Grunt的源文件。

在Vistual Studio 2015中，創建新的ASP.NET應用程序。
在“新ASP.NET項目”對話框中，選擇ASP.NET Empty模板並且單擊OK按鈕。
在解決方案管理器中，可以看到項目的目錄結構，Src文件夾包含一個空的wwwroot和dependencies節點
在項目中添加一個名為Typescript的文件夾
在添加任何文件之前，確認Visual Studio 2015打開了“保存時編譯”的項目(在“工具->選項->文本編輯器->Typescript=>項目”節點下)
右擊Typescript目錄，點擊”添加->新項目”選擇Javascript項目命名為Tastes.ts（注意ts后綴），拷貝下列代碼
```
enum Tastes { Sweet, Sour, Salty, Bitter }
```

在Typescript目錄中添加第二個文件命名為Food.ts，拷貝以下代碼

class Food {
    constructor(name: string, calories: number) {
        this._name = name;
        this._calories = calories;
    }

    private _name: string;
    get Name() {
        return this._name;
    }

    private _calories: number;
    get Calories() {
        return this._calories;
    }

    private _taste: Tastes;
    get Taste(): Tastes { return this._taste }
    set Taste(value: Tastes) {
        this._taste = value;
    }
}

配置NPM

下一步，配置npm來下來grunt和grunt-tasks

在解決方案目錄中，右擊並選擇“添加->新項目”選擇npm configuration file，保留默認的文件名，點擊確定按鈕
在package.json文件中，在devDependencies屬性下，輸入grunt，使用只能提示選擇grunt並回車，添加冒號，並使用智能提示選擇版本號
添加我們需要的更多的依賴項目
保存文件

這些包將會被自動下載，你可以在node-modules目錄下看到下載的內容，前提是你打開了”顯示所有文件“

如果需要的話，你要可以通過右鍵單擊dependences下的NPM，選擇Restore Packages按鈕恢復這些包

配置Grunt

Grunt使用名為gruntfile.js的文件清單進行配置、加載和注冊任務，讓它可以手動的運行或者基數Vistual Studio的事件機制自動運行

右鍵單擊項目文件，選擇”添加->新項目“,選擇”Grunt configuration file”選項，保留默認的文件名，並點擊添加按鈕
初始的文件包含了grunt.initConfig()方法，這個方法就是我們用來設置選項的地方
```
module.exports = function (grunt) {
    grunt.initConfig({
    });
};
```
在上文的方法中，添加clean任務，這個配置可以添加一個數組來定義要清理的目錄或者文件
```
module.exports = function (grunt) {
    grunt.initConfig({
        clean: ["wwwroot/lib/*", "temp/"],
    });
};
```
在initConfig方法下方，我們需要調用grunt.loadNpmTasks方法來讓任務在Visual Studio中運行
```
grunt.loadNpmTasks("grunt-contrib-clean");
```

保存這個文件，文件內容如下所示

module.exports = function (grunt) {
    grunt.initConfig({
        clean: ["wwwroot/lib/*", "temp/"],
    });
    grunt.loadNpmTasks("grunt-contrib-clean");
};

右鍵點擊gruntfile.js，選擇”Task Runner Explorer”
驗證clean任務已經出現在“任務”節點下
右鍵點擊clean任務，選擇Run,一個命令行窗體顯示，並執行定義的任務

在initConfig方法中，添加concat任務
Src屬性定義了要鏈接的文件列表，dest屬性定義了合並完成的目標文件，而all屬性定義了在任何構建環境下，任務都將執行

module.exports = function (grunt) {
    grunt.initConfig({
        clean: ["wwwroot/lib/*", "temp/"],
        concat: {
            all: {
                src: ['TypeScript/Tastes.js', 'TypeScript/Food.js'],
                dest: 'temp/combined.js'
            }
        },
    });
    grunt.loadNpmTasks("grunt-contrib-clean");
};

添加jihit任務
jihit代碼質量工具將會在temp目錄下所有的js文件中運行

jshint: {
            files: ['temp/*.js'],
            options: {
                '-W069': false,
            }
        }

添加uglify任務
src定義了混淆的源文件列表，dest定義了目標文件

uglify: {
        all: {
                src: ['temp/combined.js'],
                dest: 'wwwroot/lib/combined.min.js'
        }
},

最后，調用grunt.loadNpmTasks()讓上文定義的所有任務在Visual Studio中執行

保存文件，最終文件內容如下所示

module.exports = function (grunt) {
    grunt.initConfig({
        clean: ["wwwroot/lib/*", "temp/"],
        concat: {
            all: {
                src: ['TypeScript/Tastes.js', 'TypeScript/Food.js'],
                dest: 'temp/combined.js'
            }
        },
        jshint: {
            files: ['temp/*.js'],
            options: {
                '-W069': false,
            }
        },
        uglify: {
            all: {
                src: ['temp/combined.js'],
                dest: 'wwwroot/lib/combined.min.js'
            }
        },
    });
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
};

你會發現，上文定義的任務已經都出現在了Task Runner Explorer中

依次執行這些任務，

集成起來

使用grunt.registerTask方法來注冊運行一系列指定順序的任務，比如，運行上文中任務的順序應該為clean->concat->jshint->uglify。在文件中添加以下代碼，並且保持方法調用和loadNpmTasks調用時同級的

grunt.registerTask("all", ['clean', 'concat', 'jshint', 'uglify']);

現在你可以在Task Runner Explorer中找到一個名為all的別名任務，運行它即可順序執行上文中的所有任務了

監測文件變化

Watch任務可以監視文件和目錄的變化，並且在監測到變化后觸發一系列任務，在initConfig方法中添加以下的代碼來監視Typescript目錄下的所有js文件的變化，並執行’all“任務

watch: {
            files: ["TypeScript/*.js"],
            tasks: ["all"]
        }

添加一個loadNpmTask方法調用讓任務顯示在Task Runner Explorer中

grunt.loadNpmTasks('grunt-contrib-watch');

運行Watch任務，命令行窗體將處在等待狀態，此時它監視着文件的變化，打開一個Typescript文件，添加任何內容，你就會發現它已經在工作了

與Visual Studio事件一起協作

你除了可以手動運行這些任務之外，你還可以把這些任務和Visual Studio事件綁定，當Visual Studio觸發既定的事件后，自動運行定義的任務
在Task Runner Explorer中，右鍵點擊watch任務，選擇“Bindings->Project Open”，此時，當你打開項目的時候，watch任務將自動執行並且觀測文件變化並執行上文中定義的一系列任務

使用Gulp

除了一些著名的不同以外，Gulp的配置文件和grunt的非常相似，下文中的例子對比grunt的示例但是使用gulp包和約定。

NPM 包的不同

與grunt一樣，gulp定義也在ackage.json文件的devDependencies屬性中，內容如下文所示，你也可以通過只能提示來更新到最近的版本號。

{
  "version": "1.0.0",
  "name": "GruntFromEmptyWebApp",
  "private": true,
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-clean": "0.3.1",
    "gulp-jshint": "1.11.0",
    "gulp-concat": "2.5.2",
    "gulp-uglify":"1.2.0",
    "gulp-rename": "1.2.2",
    "gulp-watch": "4.2.4"
  }
}

Gulpfile和Gruntfile示例的不同

取代gruntfile.js，添加一個命名為gulpfile.js的文件，在這個文件中，使用node.js的方法require()為下文中的幾個變量賦值

var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var watch = require('gulp-watch');

在賦值語句下方，調用gulp的task方法，第一個參數是任務的名字的字符串表示方式，第二個參數是一個回調方法

gulp.task('default', function () {
    // place code for your default task here
});

此時在Task Runner Explorer中已經存在一個命名為default的任務，雖然它是空的

在task方法的回調函數內部，使用方才定義的gulp執行我們需要的工作，首先定義一個clean任務

gulp.src('wwwroot/lib/*').pipe(clean());

Gulp流

gulp是一個包含src、pipe和dest方法的流式對象

src()方法用來定義流從哪里來
pipe()方法定義怎么重寫流
dest()方法定義流的輸出

代碼通常的模式如下文所示

gulp.src()
        .pipe()
        .pipe()
        .pipe(dest());

src方法拿到初始的原始流文件，在一系列的pipe調用后執行對流的操作，最后通過dest()方法輸出最終的結果，這種方式的優勢是只有一個輸入和一個輸出，讓任務執行的更快。

集成

下文是我們組織的一系列任務，將它定義為ALL，執行的任務和上文中grunt的例子是完全一樣的

gulp.task("all", function () {
    gulp.src('wwwroot/lib/*').pipe(clean());
    gulp.src(['TypeScript/Tastes.js', 'TypeScript/Food.js'])
           .pipe(concat("combined.js"))
           .pipe(jshint())
           .pipe(uglify())
           .pipe(rename({
               extname: '.min.js'
           }))
           .pipe(gulp.dest('wwwroot/lib'))
});

watch任務也和grunt的示例非常相似

gulp.task("watch", function () {
    gulp.watch("TypeScript/*.js", ['all']);
});

使用同樣的方式，在Task Runner Explorer中綁定Visual Studio事件，就可以讓watch任務在項目打開時自動執行了。

乙烷

原文鏈接：http://docs.asp.net/en/latest/client-side/grunt-gulp.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ASP.NET 5系列教程 (五)：在Visual Studio 2015中使用Grunt、Bower開發Web程序構建工具：webpack與grunt/gulp Gulp.js----比Grunt更易用的前端構建工具 Gulp，比Grunt更好用的前端構建工具 Visual Studio 2015和ASP.NET 5中可用的前端開發工具集構建工具Gulp JavaScript自動化構建工具入門----grunt、gulp、webpack Visual Studio 2015 開發 ASP.NET 5 有何變化？(轉) JavaScript自動化構建工具grunt、gulp、webpack介紹 Visual Studio 2015 開發 ASP.NET 5 有何變化？