Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

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调用时同级的

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

时间: 2024-10-25 03:49:01

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往往在硬盘上是

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包管理. G

ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bowe

基于Visual Studio 2015,你可以: 方便的管理前端包,如jQuery, Bootstrap, 或Angular. 自动运行任务,如LESS.JavaScript压缩.JSLint.JavaScript单元测试等. 方便的获得Web开发者生态圈的工具包. 为了实现这些场景,Visual Studio 2015已经内置了一些流行的第三方工具包: Bower:Web包管理器,Bower可以帮你安装前端包,包括JavaScript.CSS类库.对于服务器端包,请通过NuGet包管理. G

Visual Studio 2015中的常用调试技巧分享

.NET 技术交流群:337901356 欢迎您的加入! 为什么要学习调试? 调试(Debug)是作为一个程序员必须要学会的东西,学会调试可以极大的提高开发效率,排错时间,很多人不喜欢调试,但我认为这是一个很不可取的选择,调试的时候能让我们看到程序的执行顺序.步骤以及过程等,调试的时候可以让我们监视代码中各个变量的情况,调试让我们可以让我们快速的找出错误的根源.可见调试是至关重要的. 要学习好怎么调试,那么必须去了解VS 这个IDE中的各种调试技巧,下面我就讲讲我所经常在调试程序中所用到的技巧.

微软移除Visual Studio 2015中的UML

微软已经在Visual Studio 2015中移除了UML(Unified Modeling Language,统一建模语言),原因是该语言使用率过低.因此微软要优化产品结构,把好钢用在刀刃上. Visual Studio高级产品经理Jean-Marc Prieur表示,移除UML是一个艰难的决定,毕竟这是软件的一个特定.但由于使用UML的用户量实在是越来越少,因此公司必须确保将资源投入到能提供最大客户价值的特性上. 对于那“1%”(代名词,并非确切数值)的用户,微软表示可以转战VS2015或

Visual Studio 2015中安装Xamarin

1, 下载地址http://xamarin.com/download 2, 安装后,发现xamarin并没有在visual studio 2015中找到, 去Control Panel -> Open Programs and Features -> 右键Xamarin -> 点击"Change" button. 3, 选择Xamarin for Visual Studio 2015,然后点击安装. 4, 在打开visual studio 2015时,就会发现Xama

Win10开发必备工具:Visual Studio 2015正式版下载

7月21日凌晨最新消息,面向大众用户的Visual Studio 2015集成开发工具正式版免费试用版已经推出.本文帮大家汇总一下简体中文社区版.专业版以及企业版在线安装版以及ISO离线安装镜像下载地址. Visual Studio Community 2015简体中文版(社区版,针对个人免费): http://download.microsoft.com/download/B/4/8/B4870509-05CB-447C-878F-2F80E4CB464C/vs2015.com_chs.iso

VS2015--win32工程配置的一些想法之在 Visual Studio 2015 中进行调试的同时分析性能

出处: https://msdn.microsoft.com/zh-cn/magazine/dn973013(en-us).aspx 许多开发商花了绝大多数时间获取应用程序才能正常发挥作用.更少的时间里专注于应用程序的性能.虽然有了很长一段时间分析工具在 Visual Studio 中的,他们是单独的一组学习工具.许多开发人员没有花时间去学习和使用它们的时候会出现性能问题. 这篇文章将介绍 Visual Studio 2015 年新的诊断工具调试器窗口. 它还将描述如何使用它来分析性能作为定期调

VS2015--win32project配置的一些想法之在 Visual Studio 2015 中进行调试的同一时候分析性能

出处: https://msdn.microsoft.com/zh-cn/magazine/dn973013(en-us).aspx 很多开发商花了绝大多数时间获取应用程序才干正常发挥作用.更少的时间里专注于应用程序的性能. 尽管有了非常长一段时间分析工具在 Visual Studio 中的,他们是单独的一组学习工具.很多开发者没有花时间去学习和使用它们的时候会出现性能问题. 这篇文章将介绍 Visual Studio 2015 年新的诊断工具调试器窗体. 它还将描写叙述怎样使用它来分析性能作为