Visual Studio – 用于 Web 开发的新式工具： Grunt 和 Gulp
最后更新于：2022-04-01 06:52:45
# Visual Studio - 用于 Web 开发的新式工具： Grunt 和 Gulp
作者 [Adam Tuliper](https://msdn.microsoft.com/zh-cn/magazine/mt149362?author=Adam+Tuliper) | 2015 年 12 月
现代 Web 开发者可以使用的工具有很多。JavaScript 任务运行程序 Grunt 和 Gulp 是目前 Web 项目中最常用的两种工具。如果您从未使用 JavaScript 运行任务，或者您习惯使用普通的 Visual Studio 进行 Web 开发，则会觉得这是个陌生概念，但您有充分的理由试一试。JavaScript 任务运行程序在浏览器外部工作，通常在命令行处使用 Node.js。这样，您便可以轻松运行前端开发相关任务，包括缩小、串联多个文件、确定脚本相关性并按正确顺序向 HTML 页面插入脚本引用、创建单元测试工具、处理前端生成脚本（如 TypeScript 或 CoffeeScript 等）。
## 使用哪一个？Grunt 还是 Gulp？
主要是根据个人和项目偏好来选择任务运行程序，除非您想使用的插件只支持特定的任务运行程序。两者的主要区别在于，Grunt 是由 JSON 配置设置驱动，并且每个 Grunt 任务通常必须创建中间文件将结果传递给其他任务；而 Gulp 则是由可执行的 JavaScript 代码驱动（也就是说，不只是由 JSON 驱动），并能将一个任务的结果流式传输到下一个任务，而无需使用临时文件。Gulp 是冉冉升起的新星，因此，您会发现许多新项目都在使用它。Grunt 依然受到许多众所周知的程序（例如，用它来生成 jQuery 的 jQuery）支持。Grunt 和 Gulp 均通过插件工作，这些插件是您安装用来处理特定任务的模块。可用插件的生态系统十分庞大。通常情况下，您会发现任务包同时支持 Grunt 和 Gulp，这再次说明使用哪一个任务运行程序完全是您的个人选择。
## 安装和使用 Grunt
Grunt 和 Gulp 的安装程序是节点包管理器 (npm)，我曾在 10 月发表的文章 ([msdn.com/magazine/mt573714](http://msdn.com/magazine/mt573714)) 中简单介绍过它。Grunt 的安装命令实际分为两个部分。第一部分是 Grunt 命令行接口的一次性安装。第二部分是将 Grunt 安装至项目文件夹。通过这两部分安装，您可以在系统中使用 Grunt 的多个版本，并从任意路径使用 Grunt 命令行接口。
~~~
#only do this once to globally install the grunt command line runner
npm install –g grunt-cli
#run within your project folder one time to create package.json
#this file will track your installed npm dependencies
#like grunt and the grunt plug-ins, similar to bower.json (see the last article)
npm init
#install grunt as a dev dependency into your project (again see last article)
#we will still need a gruntfile.js though to configure grunt
npm install grunt –save-dev
~~~
## Grunt 配置
Grunt 配置文件只是具有包装器函数的 JavaScript 文件，其中包含配置、插件加载和任务定义（如图 1所示）。
图 1：Grunt 配置文件
~~~
module.exports = function (grunt) {
// Where does uglify come from? Installing it via:
// npm install grunt-contrib-uglify --save-dev
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': '*.js'
}
}
}
});
// Warning: make sure you load your tasks from the
// packages you've installed!
grunt.loadNpmTasks('grunt-contrib-uglify');
// When running Grunt at cmd line with no params,
// you need a default task registered, so use uglify
grunt.registerTask('default', ['uglify']);
// You can include custom code right inside your own task,
// as well as use the above plug-ins
grunt.registerTask('customtask', function () {
console.log("\r\nRunning a custom task");
});
};
~~~
只需调用以下内容，即可在命令行处运行图 1 中的任务：
~~~
#no params means choose the 'default' task (which happens to be uglify)
grunt
#or you can specify a particular task by name
grunt customtask
~~~
然后，您会在 wwwroot/output-min.js 处获得丑化（缩小）的串联结果。如果您已使用 ASP.NET 缩小和捆绑，则会发现此过程的不同之处，即它不是只能用于运行应用或编译，您可以为任务选择其他更多选项（如丑化）。在我看来，我认为此工作流更加简洁明了、易于理解。
您可以使用 Grunt 将任务串联在一起，让它们彼此依赖。这些任务会同步运行，所以必须先完成一个任务，才能移至下一个任务。
~~~
#Specify uglify must run first and then concat. Because grunt works off
#temp files, many tasks will need to wait until a prior one is done
grunt.registerTask('default', ['uglify', 'concat']);
~~~
## 安装和使用 Gulp
Gulp 的安装与 Grunt 类似。我将更详细地介绍 Gulp，但请注意，您可以使用任一任务运行程序执行类似的操作，我只是不想太过重复罢了。Gulp 可以进行全局安装，以便您能在系统上从任意路径使用它；也可以进行本地安装，安装至特定项目版本的项目文件夹中。如果全局安装的 Gulp 发现本地项目中安装的 Gulp，则前者会将控制权移交给后者，从而遵循 Gulp 的项目版本。
~~~
#Only do this once to globally install gulp
npm install –g gulp
#Run within your project folder one time to create package.json
#this file will track your installed npm dependencies
#like gulp and the gulp plug-ins
npm init
#Install gulp as a dev dependency into your project
#we will still need a gulpfile.js to configure gulp
npm install gulp --save-dev
~~~
## Gulp 配置和 API
Gulp 和 Grunt 配置的差异显著。gulpfile.js 配置文件通常具有图 2 中所示的结构，包含插件加载和任务定义的“要求”。请注意，我在这里使用的不是 JSON 配置设置；相反，任务是由代码驱动。
图 2：Gulp 配置文件
~~~
// All the 'requires' to load your
// various plug-ins and gulp itself
var gulp = require('gulp');
var concat = require('gulp-concat');
// A custom task, run via: gulp customtask
gulp.task('customtask', function(){
// Some custom task
});
// Define a default task, run simply via: gulp
gulp.task('default', function () {
gulp.src('./lib/scripts/*.js')
.pipe(concat('all-scripts.js'))
.pipe(gulp.dest('./wwwroot/scripts'));
});
~~~
Gulp 通过以下多个密钥 API 和概念工作：src、dest、管道、任务和 glob。gulp.src API 指示 Gulp 开启哪些文件进行处理，然后这些文件通常会通过管道传送到其他一些函数，而不是所创建的临时文件。这就是与 Grunt 的关键差别。下面展示了一些无需通过管道传送结果的 gulp.src 基本示例，我将对此进行简单介绍。此 API 调用将所谓的 glob 作为参数进行提取。一般来说，glob 是您可以进入的模式（类似于正则表达式）。例如，指定一个或多个文件的路径（若要详细了解 glob，请访问[github.com/isaacs/node-glob](http://github.com/isaacs/node-glob)）：
~~~
#Tell gulp about some files to work with
gulp.src('./input1.js');
#This will represent every html file in the wwwroot folder
gulp.src('./wwwroot/*.html')
#You can specify multiple expressions
gulp.src(['./app/**/*.js', './app/*.css']
~~~
如您所想，dest（目标）API 指定目标并提取 glob。由于 glob 能够灵活定义路径，因此您可以输出各个文件或输出到文件夹中：
~~~
#Tell dest you'll be using a file as your output
gulp.dest ('./myfile.js');
#Or maybe you'll write out results to a folder
gulp.dest ('./wwwroot');
~~~
Gulp 中的任务就是您编写用来执行特定操作的代码。任务格式十分简单，但任务的使用方式有多种。最直接的方式是使用默认任务以及一个或多个其他任务：
~~~
gulp.task('customtask', function(){
// Some custom task to ex. read files, add headers, concat
});
gulp.task('default', function () {
// Some default task that runs when you call gulp with no params
});
~~~
任务可以并行执行，也可以彼此依赖。如果您不关心顺序，就可以将它们串联在一起，如下所示：
~~~
gulp.task('default', ['concatjs', 'compileLess'], function(){});
~~~
此示例定义了默认任务，只单独运行各个任务，以串联 JavaScript 文件和编译 LESS 文件（假设此处命名的任务中包含代码）。如果要求规定必须先完成一个任务，然后再执行另一个任务，那么您需要让任务彼此依赖，然后再运行多个任务。在以下代码中，默认任务先等待串联完成，进而等待丑化完成：
~~~
gulp.task('default', ['concat']);
gulp.task('concat', ['uglify'], function(){
// Concat
});
gulp.task('uglify', function(){
// Uglify
});
~~~
管道 API 使用 Node.js 流 API 通过管道将一个函数的结果传送到另一个函数。工作流通常为：读取 src，通过管道发送给任务，通过管道将结果发送到目标。这一完整的 gulpfile.js 示例读取 /scripts 中的所有 JavaScript 文件，将它们串联到一个文件中，然后将输出写入另一个文件夹：
~~~
// Define plug-ins – must first run: npm install gulp-concat --save-dev
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('default', function () {
#Get all .js files in /scripts, pipe to concatenate, and write to folder
gulp.src('./lib/scripts/*.js')
.pipe(concat('all-scripts.js'))
.pipe(gulp.dest('./wwwroot/scripts'));
}
~~~
下面讲一个现实生活中的示例。您经常想串联文件和/或在源代码文件中添加信息标头。只需几步操作，即可轻松完成。您可以向网站的根添加几个文件（此任务也全都通过代码完成，请参阅 gulp-header 文档）。首先，创建名为 copyright.txt 的文件，其中包含要添加的标头，如下所示：
~~~
/*
MyWebSite Version <%= version %>
https://twitter.com/adamtuliper
Copyright 2015, licensing, etc
*/
~~~
接下来，创建名为 version.txt 的文件，其中包含当前版本号（也有可以实现版本号递增的插件，如 gulp-bump 和 grunt-bump）：
~~~
1.0.0
~~~
此时，在项目根中安装 gulp-header 和 gulp-concat 插件：
~~~
npm install gulp-concat gulp-header --save-dev
~~~
您也可以将它们手动添加到 package.json 文件中，并且允许 Visual Studio 为您执行包还原。
最后，您只需使用 gulpfile.js 指示 Gulp 要执行的操作（如图 3 所示）。如果您不想将所有脚本串联在一起，只想向每个文件添加标头，则只需注释禁止管道（串联）行即可。非常简单，是不是？
图 3：Gulpfile.js
~~~
var gulp = require('gulp');
var fs = require('fs');
var concat = require("gulp-concat");
var header = require("gulp-header");
// Read *.js, concat to one file, write headers, output to /processed
gulp.task('concat-header', function () {
var appVersion = fs.readFileSync('version.txt');
var copyright =fs.readFileSync('copyright.txt');
gulp.src('./scripts/*.js')
.pipe(concat('all-scripts.js'))
.pipe(header(copyright, {version: appVersion}))
.pipe(gulp.dest('./scripts/processed'));
});
~~~
然后，您只需通过以下命令运行此任务即可。瞧，您已经串联了所有 .js 文件，添加了自定义标头，并将输出写入了 ./scripts/processed 文件夹：
~~~
gulp concat-header
~~~
## 任务运行程序资源管理器
Visual Studio 通过任务运行程序资源管理器为 Gulp 和 Grunt 提供支持。Visual Studio 2015 中包含此资源管理器（作为一项 Visual Studio 扩展）。您可以在“查看 | 其他 Windows | 任务运行程序资源管理器”中找到它。任务运行程序资源管理器非常棒，因为它会检测项目中是否有 gulpfile.js 或 gruntfile.js，解析任务，然后提供 UI 执行所发现的任务（如图 4 所示）。此外，当项目中发生预定义操作时，您可以定义要运行的任务。接下来，我将介绍这一点，因为 ASP.NET 5 在它的默认模板中使用此功能。只需右键单击任务进行执行，或者将它与特定操作绑定（例如，对项目 Open 执行任务）。
图 4：同时显示 Grunt 和 Gulp 任务及选项的任务运行程序资源管理器
如图 5 所示，当您使用 Gulp 看不到想要突出显示的 Grunt 任务时，Grunt 提供可用选项，特别是强制选项（用于忽略警告）和详述选项（左上角的 F 和 V）。这些只是传递到 Grunt 命令行的参数。任务运行程序资源管理器的主要优点是，可以显示传递到 Grunt 和 Gulp 命令行的命令（在任务输出窗口中），这就让后台运行情况不再神秘。
图 5：其他 Grunt 选项和命令行
## Gulp 和 ASP.NET 5
Visual Studio 2015 中的 ASP.NET 5 模板使用 Gulp，这些模板将 Gulp 安装到项目的 node_components 文件夹，可供项目随时使用。您当然仍能在 ASP.NET 5 项目中使用 Grunt；只需务必按照以下方式将它安装到项目中即可：通过 npm，或将它添加到 devDependencies 内的 packages.json 中，并允许 Visual Studio 的自动包还原功能运转起来。我想强调的是： 您可以通过命令行或在 Visual Studio 内部（以您的偏好为准）做到这一切。
截至本文撰写之时，当前的 ASP.NET 5 模板包含多个任务，可缩小和串联 .css 和 .js 文件。在旧版 ASP.NET 中，这些任务是在运行时通过已编译的代码进行处理，但这并不是完成此类任务的理想位置和时间。如图 6 所示，命名为 clean 和 min 的任务调用它们的 css 和 js 方法，以便缩小这些文件或清理之前缩小的文件。
图 6：ASP.NET 5 预览模板中开箱即用的任务
再例如，下面的 Gruntfile.js 行展示了如何同时运行多个任务：
~~~
gulp.task("clean", ["clean:js", "clean:css"]);
~~~
您可以视需要选择将 Grunt 和 Gulp 任务绑定到 Visual Studio 中的 4 个不同操作。使用 MSBuild 时，惯常做法是定义预生成和生成后的命令行，以便执行各种任务。借助任务运行程序资源管理器，您可以定义“生成前”、“生成后”、“清理”和“项目 Open”事件来执行这些任务。这样做只会向 gulpfile.js 或 gruntfile.js 文件添加注释，并不影响执行，但会被任务运行程序资源管理器查找。若要了解 ASP.NET 5 gulpfile.js 中的“清理”绑定关系，请查看文件顶部的这一行内容：
~~~
// <binding Clean='clean' />
~~~
这就是跟踪事件所需完成的一切。
## 总结
Grunt 和 Gulp 都非常适合添加到您的 Web 工具库中。两种任务运行程序均受到大力支持，且可用插件的生态环境十分庞大。每个 Web 项目都能受益于这两种任务运行程序。有关详细信息，请务必查阅以下内容：
* Grunt“入门”文档 ([bit.ly/1dvvDWq](http://bit.ly/1dvvDWq))
* Gulp 方案 ([bit.ly/1L8SkUC](http://bit.ly/1L8SkUC))
* 包管理和工作流自动化： 计算机包管理器 ([bit.ly/1FLwGW8](http://bit.ly/1FLwGW8))
* Node.js 主控模块和包 ([bit.ly/1N8UKon](http://bit.ly/1N8UKon))
* Adam 的修理厂 ([bit.ly/1NSAYxK](http://bit.ly/1NSAYxK))
* * *
Adam Tuliper *是生活在阳光明媚的南加州的一位 Microsoft 资深技术传播者。他是 Web 开发者、游戏开发者、Pluralsight 作者以及全面技术的爱好者。通过 Twitter [@AdamTuliper](https://twitter.com/@AdamTuliper) 或“Adam 的修理厂”博客 ([bit.ly/1NSAYxK](http://bit.ly/1NSAYxK)) 与他取得联系。*