ASP.NET5之客户端开发：Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

asp.net5之客户端开发：Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

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的源文件。

1. 在Vistual Studio 2015中，创建新的ASP.NET应用程序。
2. 在“新ASP.NET项目”对话框中，选择ASP.NET Empty模板并且单击OK按钮。
3. 在解决方案管理器中，可以看到项目的目录结构，Src文件夹包含一个空的wwwroot和dependencies节点
4. 在项目中添加一个名为Typescript的文件夹
5. 在添加任何文件之前，确认Visual Studio 2015打开了“保存时编译”的项目(在“工具->选项->文本编辑器->Typescript=>项目”节点下)
6. 右击Typescript目录，点击”添加->新项目”选择Javascript项目命名为Tastes.ts（注意ts后缀），拷贝下列代码

   enum Tastes { Sweet, Sour, Salty, Bitter }

7. 在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

1. 在解决方案目录中，右击并选择“添加->新项目”选择npm configuration file，保留默认的文件名，点击确定按钮
2. 在package.json文件中，在devDependencies属性下，输入grunt，使用只能提示选择grunt并回车，添加冒号，并使用智能提示选择版本号
3. 添加我们需要的更多的依赖项目
4. 保存文件

这些包将会被自动下载，你可以在node-modules目录下看到下载的内容，前提是你打开了”显示所有文件“

如果需要的话，你要可以通过右键单击dependences下的NPM，选择Restore Packages按钮恢复这些包

配置Grunt

Grunt使用名为gruntfile.js的文件清单进行配置、加载和注册任务，让它可以手动的运行或者基数Vistual Studio的事件机制自动运行

1. 右键单击项目文件，选择”添加->新项目“,选择”Grunt configuration file”选项，保留默认的文件名，并点击添加按钮初始的文件包含了grunt.initConfig()方法，这个方法就是我们用来设置选项的地方

   module.exports = function (grunt) {    grunt.initConfig({    });};

2. 在上文的方法中，添加clean任务，这个配置可以添加一个数组来定义要清理的目录或者文件

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

3. 在initConfig方法下方，我们需要调用grunt.loadNpmTasks方法来让任务在Visual Studio中运行

   grunt.loadNpmTasks("grunt-contrib-clean");

4. 保存这个文件，文件内容如下所示

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

5. 右键点击gruntfile.js，选择”Task Runner Explorer”
6. 验证clean任务已经出现在“任务”节点下
7. 右键点击clean任务，选择Run,一个命令行窗体显示，并执行定义的任务
8. 在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");};

9. 添加jihit任务jihit代码质量工具将会在temp目录下所有的js文件中运行

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

10. 添加uglify任务src定义了混淆的源文件列表，dest定义了目标文件

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

11. 最后，调用grunt.loadNpmTasks()让上文定义的所有任务在Visual Studio中执行
12. 保存文件，最终文件内容如下所示

    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');};

13. 你会发现，上文定义的任务已经都出现在了Task Runner Explorer中依次执行这些任务，

集成起来

使用grunt.registerTask方法来注册运行一系列指定顺序的任务，比如，运行上文中任务的顺序应该为clean->concat->jshint->uglify。在文件中添加以下代码，并且保持方法调用和loadNpmTasks调用时同级的