# 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)) 與他取得聯系。*