當(dāng)你剛接觸前端開(kāi)發(fā)時(shí) 并開(kāi)始掌握 HTML5、CSS 和 JavaScript，下一步顯然是 您手中的工具最 開(kāi)發(fā)人員習(xí)慣在這個(gè)復(fù)雜的空間中保持理智。你也值得擁有更多 使用 Less 編寫(xiě) CSS 表時(shí)的靈活性和功能。你也是 值得通過(guò)縮小 JS 代碼來(lái)優(yōu)化帶寬。你也值得成為 能夠使用 JSHint 自動(dòng)檢查您的 JS 代碼是否良好。

你值得擁有這些好東西。

所以你開(kāi)始使用所有這些很棒的工具 手動(dòng)運(yùn)行越來(lái)越多的命令行。有時(shí)，你會(huì)忘記 運(yùn)行 Less 編譯器...有時(shí)你忘記運(yùn)行 JSHint 并且會(huì)出現(xiàn)錯(cuò)誤...

突然你發(fā)現(xiàn)自己在想： 有沒(méi)有解決方案可以自動(dòng)化所有這些工具？你怎樣才能創(chuàng)建一個(gè) 可重復(fù)的工作流程以防止您犯錯(cuò)誤？

顯然存在一個(gè)解決方案，并且有兩個(gè)工具 特別是等待您開(kāi)始使用：Grunt 和Gulp。

作為使用這些工具的新手，您 想知道它們?nèi)绾喂ぷ饕约笆褂媚囊粋€(gè)，不是嗎？嗯，那就完美了， 您正在閱讀正確的文章！

1.我們將使用的示例

我會(huì)給你使用Grunt的基礎(chǔ) 和 Gulp 使用一個(gè)非常簡(jiǎn)單的示例，您可以從 GitHub 下載該示例。

這是一個(gè)簡(jiǎn)單的網(wǎng)站，由三個(gè)部分組成 文件：

Styles.less 在 a 中定義 CSS 表 比使用標(biāo)準(zhǔn) CSS 文件更豐富的方式。最后我們使用 Less 編譯器創(chuàng)建 styles.css 文件。使用 Less，我們可以在 CSS 文件中使用變量：

在此入門(mén)指南中獲取有關(guān) Less 的更多信息。

JavaScript 和 HTML 代碼確實(shí) 簡(jiǎn)單的。該頁(yè)面應(yīng)如下所示：

2.?了解 Node.js 包管理器

您需要首先了解 Node.js 包管理器 (npm) 的工作原理。

Npm 是 Node.JS 附帶的工具。它 用于獲取工具和框架，同時(shí)自動(dòng)解析它們 依賴關(guān)系。

例如，使用 Less 并編譯它 到 Web 可用的 CSS 文件中，您首先需要使用以下命令安裝 Less：

npm install -g less

注意： 要獲取 npm 命令行，您 必須從 Node 網(wǎng)站安裝 Node.js。

完成后，您可以運(yùn)行此命令 將 .less 文件編譯為 .css：

lessc styles.less > styles.css

Npm 使用它創(chuàng)建并存儲(chǔ)在其正在工作的本地文件夾中的文件：package.json。 該文件使用 JavaScript 對(duì)象表示法 (JSON) 格式讓 npm 知道 安裝了哪個(gè)工具、版本以及當(dāng)前項(xiàng)目（用 當(dāng)前文件夾）。

該文件對(duì)于 Grunt 和 Gulp 很重要 因?yàn)樗鼘严螺d并可在您的應(yīng)用程序中使用的插件列表 自動(dòng)化工作流程。

要?jiǎng)?chuàng)建一個(gè)空的 package.json 文件，您 可以使用以下npm命令：

npm init

您將回答一些問(wèn)題 可以使用默認(rèn)選項(xiàng)回答，然后就可以開(kāi)始了。

在此文件中，您將有兩種 依賴項(xiàng)：

• 所需的 執(zhí)行您的 Web 應(yīng)用程序或 Node.js 應(yīng)用程序
• 所需的 開(kāi)發(fā)階段（如 Less），用于編譯或檢查代碼

Npm 基本上為您提供了三種方法 安裝包：

• 在您的機(jī)器上全局使用 –g 或 -global 選項(xiàng)
• 出于執(zhí)行目的，在本地 在您的項(xiàng)目文件夾中不使用任何選項(xiàng)（僅使用 npm install [工具或框架]）
• 出于開(kāi)發(fā)目的，本地 使用 --save-dev 的項(xiàng)目文件夾 選項(xiàng)

第三個(gè)將創(chuàng)建一個(gè) devDependencies 部分/屬性 在 package.json 文件中。

3. 咕嚕聲

什么 是咕嚕嗎？

Grunt 是 JavaScript 自動(dòng)化領(lǐng)域的先驅(qū) 工作流程區(qū)域。有很多知名的 Grunt 用戶，例如 Twitter、jQuery 和 Modernizr。

Grunt 的基本原理是為我們提供一種簡(jiǎn)單的方法來(lái)運(yùn)行 tasks。任務(wù)是一組代碼文件 以及已經(jīng)為您創(chuàng)建的配置文件。您可以通過(guò)以下方式獲取新任務(wù) 安裝使用 npm 獲得的 Grunt 插件。你可以找到一個(gè)插件 幾乎您可能使用的所有工具，例如 Less 和 JSHint。

要運(yùn)行 Grunt，您必須創(chuàng)建一個(gè) Gruntfile，在其中指定 您要運(yùn)行哪些任務(wù)以及每個(gè)任務(wù)的配置。一旦這個(gè) 完成后，您只需運(yùn)行 grunt 命令行指定要運(yùn)行的任務(wù)（默認(rèn)或特定任務(wù)） 它會(huì)自動(dòng)完成。

現(xiàn)在讓我們通過(guò)分步指南來(lái)完成這一切設(shè)置。

步驟 1. 創(chuàng)建 Package.json 文件

使用 npm 初始化文件：

npm init

您必須回答一些問(wèn)題，例如項(xiàng)目名稱和 默認(rèn)的 .js 文件是什么。您也可以選擇手動(dòng)創(chuàng)建文件 并將其內(nèi)容設(shè)置為：

{

  "name": "project-name",

  "devDependencies": {},

  "dependencies": {}

}

步驟 2. 安裝 Grunt 全球和本地

您需要全局安裝 Grunt 才能獲取命令行并 在本地初始化項(xiàng)目所需的一切。

運(yùn)行：

npm install -g grunt

然后在本地運(yùn)行：

npm install grunt --save-dev

注意： Do not forget the –dev 部分，將其指定為 devDependencies 中的 package.json 文件之一。

步驟 3. 創(chuàng)建 GruntFile.js

Grunt 使用名為 gruntFile.js 的文件進(jìn)行工作。該文件包含 Grunt 所需的一切，也就是說(shuō)：

• 配置 任務(wù)
• custom 任務(wù)
• 任務(wù)加載

Grunt 希望文件導(dǎo)出一個(gè)需要一個(gè)函數(shù)的函數(shù) 名為“grunt”的參數(shù)。您將使用此對(duì)象執(zhí)行所有 Grunt 相關(guān)操作 行動(dòng)。

這是一個(gè)最小的 gruntfile，僅讀取 package.json 文件 并創(chuàng)建一個(gè) default 任務(wù)，該任務(wù)不運(yùn)行任何內(nèi)容。

注意： 將該文件與 package.json 文件并排放置在項(xiàng)目文件夾中。

module.exports = function(grunt) {



  // Project configuration.

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

  });



  // Default task(s).

  grunt.registerTask('default', []);



};?

您可以執(zhí)行它以確保一切都已配置 正確。

為此，請(qǐng)?jiān)陧?xiàng)目上打開(kāi)命令提示符 文件夾并運(yùn)行：

grunt

您應(yīng)該看到類(lèi)似這樣的內(nèi)容：

第 4 步：添加您的第一個(gè) 任務(wù)：JSHint

現(xiàn)在您的 Gruntfile 已準(zhǔn)備就緒，下一步是添加插件 并使用它。所有插件都可以在 Grunt 網(wǎng)站的列表中找到。中的一個(gè) Gruntfile 中執(zhí)行的常見(jiàn)任務(wù)是檢查 JavaScript 語(yǔ)法是否正確 正確的。為此，我們通常使用 JSHint。

讓我們將其添加到您的 grunt 工作流程中。

如果你在 grunt 插件頁(yè)面搜索 JSHint，你會(huì)發(fā)現(xiàn) grunt-contrib-jshint，其中 對(duì)應(yīng)我們所需要的！

在項(xiàng)目文件夾中，運(yùn)行：

npm install grunt-contrib-jshint --save-dev

完成后，您必須將其添加到 Gruntfile.js 中。那里 有兩個(gè)簡(jiǎn)單的步驟：

1. 加載插件。
2. 配置 任務(wù)。

要加載插件，請(qǐng)使用 loadNpmTasks 功能：

// Load the plugin that provides the "jshint" task

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

的 配置是在initConfig 函數(shù)中完成的 您必須向參數(shù)中給定的對(duì)象添加新屬性。這 必須是您要添加的任務(wù)的名稱并且與插件相關(guān) 你用。了解該名稱和可用選項(xiàng)列表的最佳方式 任務(wù)是查看插件文檔。你總會(huì)找到一個(gè) 詳細(xì)記錄的示例。

例如，在 在我們的示例中，我們想要檢查除 gruntfile.js 之外的所有 JavaScript 文件。 我們還希望激活一組規(guī)則來(lái)簽入 JavaScript 文件，例如 eqeqeq?以確保我們?cè)谛枰獣r(shí)使用三等號(hào)。

這是 initConfig 函數(shù)修改：

您可以使用 以下命令行（您將任務(wù)名稱指定為 grunt 的參數(shù)）：

grunt jshint

的 result is here:

您只需運(yùn)行該命令即可 遇到任何錯(cuò)誤都會(huì)自動(dòng)提示您。

恭喜，您現(xiàn)在已經(jīng)在 grunt 中自動(dòng)執(zhí)行了一項(xiàng)任務(wù) 工作流程！

步驟 5. 添加第二個(gè)任務(wù)： 減少編譯

您的 JSHint 任務(wù)運(yùn)行良好，但在 工作流程。通常，我們使用 Grunt 等工具來(lái)運(yùn)行多個(gè)任務(wù)。

添加更多內(nèi)容非常容易，因?yàn)槟恍枳裱纯? 相同的步驟。假設(shè)您現(xiàn)在想要添加 less 的編譯 自動(dòng)化流程中的文件。如果你在 Grunt 插件中搜索，你會(huì) 找到一個(gè)可以安裝在項(xiàng)目文件夾中的 grunt-contrib-less 插件：

npm install grunt-contrib-less --save-dev

與 JSHint 任務(wù)一樣，您必須添加 配置：

的n, load the task:

您現(xiàn)在可以運(yùn)行 Grunt 并指定 less 任務(wù)：這將僅啟動(dòng) Less。 沒(méi)關(guān)系，但是您想運(yùn)行所有任務(wù)，對(duì)吧？這就是 default 任務(wù)的作用。

當(dāng)你只運(yùn)行 grunt 而不指定任何任務(wù)時(shí)，它將搜索 default 任務(wù)并運(yùn)行其數(shù)組中指定的所有任務(wù)。您可以修改它以運(yùn)行 less 和 jshint。 注意 that to add a group of tasks like default, you need to call the registerTask 功能：

從現(xiàn)在開(kāi)始，當(dāng)您運(yùn)行 grunt 時(shí)，它將運(yùn)行 jshint，然后是 less:

您可以添加任何您想要的任務(wù)，并且您可以 還指定其他任務(wù)組，例如 default 并通過(guò)將名稱作為參數(shù)傳遞給 grunt 命令行來(lái)調(diào)用它們。

簡(jiǎn)單吧？

第 6 步：使用“Watch So You Do” 不必手動(dòng)運(yùn)行 Grunt

現(xiàn)在，您是一名快樂(lè)的開(kāi)發(fā)人員。你所有的重復(fù)性任務(wù)都是 在 grunt 工作流程中實(shí)現(xiàn)自動(dòng)化，您只需運(yùn)行 grunt 即可 執(zhí)行。但它可以更容易地完成。它可以自動(dòng)完成。

為此，您可以添加名為 watch 的特定任務(wù)。此任務(wù)將不斷檢查您的工作文件夾，并且， 根據(jù)規(guī)則，當(dāng)文件被修改時(shí)，grunt 將運(yùn)行關(guān)聯(lián)的任務(wù)。

首先，在項(xiàng)目文件夾中安裝 watch ：

npm install grunt-contrib-watch --save-dev

使用 loadNpmTasks 函數(shù)像所有其他任務(wù)一樣加載它，并配置它。配置部分有點(diǎn) 此處有所不同，因?yàn)槟枰獮槊總€(gè)任務(wù)指定配置 想要使用 watch 進(jìn)行覆蓋。

有關(guān)詳細(xì)信息，您可以閱讀此任務(wù)的完整文檔。

當(dāng)您想激活watch時(shí)，只需運(yùn)行以下命令：

grunt watch

并且每次打開(kāi)文件時(shí)都會(huì)執(zhí)行任務(wù) 已更改，并且此文件位于特定的監(jiān)視文件范圍內(nèi) 任務(wù)。

就是這樣！你現(xiàn)在知道了要?jiǎng)?chuàng)造的一切 使用 grunt 實(shí)現(xiàn)自動(dòng)化工作流程。

4. 咕嚕咕嚕

什么 是 Gulp 嗎？

Gulp 是 grunt 的替代品。它是一個(gè) 更新一點(diǎn)，并且比 grunt 更靈活而聞名。前 選擇您要使用的一個(gè)后，讓我們看看 gulp 是如何工作的。

Gulp 是一個(gè)工作流程 自動(dòng)化工具。與 grunt 一樣，它使用 npm 和 package.json 文件工作。全部可用 插件也將使用 npm 下載并添加為 devDependencies 在 package.json 文件。

主要區(qū)別之一是 Gulp 使用流。流是一組函數(shù)，文件通過(guò)這些函數(shù) 進(jìn)入并在內(nèi)存中進(jìn)行修改。這 文件只會(huì)在進(jìn)程結(jié)束時(shí)才會(huì)寫(xiě)入磁盤(pán)，所以它更 高效的。另一方面，Grunt 任務(wù)作為孤島工作，無(wú)法鏈接。

讓我們快速了解一下 Gulp 的工作原理： 遵循幾個(gè)簡(jiǎn)單的步驟。

步驟 1. 創(chuàng)建 Package.json 文件

與 Grunt 類(lèi)似，你首先 必須創(chuàng)建 package.json 文件。您可以使用與您完全相同的技術(shù) 用于 grunt 示例。

步驟 2. 安裝 Gulp 并 Gulp-Util 全球和本地

創(chuàng)建 package.json 文件后，全局安裝 gulp 并 本地使用：

npm install -g gulp

和

npm install gulp --save-dev

這將安裝 gulp 命令行以及所需的一切 運(yùn)行 gulp 工作流程。

然后您必須安裝 gulp utils，其中包含其他插件共享的常用功能：

npm install gulp-util --save-dev

最后，創(chuàng)建最小的 gulp 文件，如下所示：

如您所見(jiàn)，它與 grunt 語(yǔ)法有點(diǎn)不同。在 gulp，插件使用 require 語(yǔ)法加載，就像您可能習(xí)慣的那樣 您是一名 Node.js 開(kāi)發(fā)人員。還有一個(gè)使用 gulp.task 函數(shù)定義的 default 任務(wù)。

如果運(yùn)行 gulp 命令 在項(xiàng)目文件夾中使用命令提示符行，您應(yīng)該看到類(lèi)似的結(jié)果 這個(gè)：

步驟 3. 使用您的第一個(gè) Task: 減少編譯

要在 gulp 中使用插件，您可以使用與我們相同的函數(shù) 用于創(chuàng)建 default 任務(wù)。 這是因?yàn)槟槐厥褂锰囟Q來(lái)創(chuàng)建任務(wù)。你 只需調(diào)用 gulp.task，設(shè)置您想要的名稱，并為其指定一個(gè) JavaScript 函數(shù)，如下所示 第二個(gè)參數(shù)。當(dāng) gulp 運(yùn)行任務(wù)時(shí)，它會(huì)運(yùn)行這個(gè)函數(shù)。

要使用插件，您可以使用您在需要時(shí)選擇的名稱來(lái)調(diào)用它。通常，您將其稱為 流媒體工作流程的一部分，通常從選擇文件開(kāi)始。 這是通過(guò) gulp.src 完成的 功能。它將選擇一堆文件并返回一個(gè)可以使用的流 通過(guò)使用 pipe 的另一個(gè)函數(shù)。那 這是您如何鏈接多個(gè)操作而不將它們寫(xiě)入磁盤(pán)的方法。你 只需將流從一個(gè)插件傳遞到另一個(gè)插件即可。

這是 Less 的基本示例：

我們首先 require ('gulp-less') ?為 gulp 加載 less 插件。 （我們使用 npm install gulp-less --save-dev 獲得它）。

的n gulp.src will 選擇所有 .less 文件，我們 將其“通過(guò)管道”傳遞給 less() 函數(shù)并 它最終被“管道”到 gulp.dest 指示將結(jié)果寫(xiě)入何處。由于 gulp.src 可以選擇多個(gè)文件， gulp.dest 指定一個(gè)文件夾。

一旦了解了管道模型，您就可以輕松獲得相同的結(jié)果 結(jié)果就是我們使用 grunt 得到的結(jié)果。

的 power of gulp is that you can create custom tasks in which you 調(diào)用多個(gè)插件，您可以在其中按照您想要的方式將它們關(guān)聯(lián)起來(lái)。

注意： there is obviously 還有一個(gè) gulp-watch 插件，您可以使用 自動(dòng)啟動(dòng)您的工作流程！

結(jié)論：選擇哪一個(gè)？

希望您現(xiàn)在已經(jīng)有了更清晰的認(rèn)識(shí) 了解為什么需要自動(dòng)化工作流程以及如何使用 Grunt 或 Gulp 來(lái)獲得它。

選擇其中之一更與 您想要實(shí)現(xiàn)的任務(wù)。

Grunt 很容易使用。你不必 了解管道系統(tǒng)，完成簡(jiǎn)單的任務(wù)會(huì)更容易 直截了當(dāng)。這是一個(gè)非常成熟的工具，被很多知名編輯使用 和開(kāi)發(fā)人員，并且有很多可用的插件。

也就是說(shuō)，Gulp 的設(shè)計(jì)方式 可以給你很大的靈活性。它已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，而且 即使您找不到像 Grunt 那樣多的插件，所有經(jīng)典的插件 一些可用于 Gulp。

如果您使用的是真正標(biāo)準(zhǔn)的工作流程 對(duì)于 JSHint、uglifying、CSS 驗(yàn)證等常見(jiàn)步驟，Grunt 是一個(gè)不錯(cuò)的選擇 選擇。如果您要執(zhí)行更復(fù)雜的任務(wù)，Gulp 將是一個(gè)很好的僚機(jī)。

更多信息

• Grunt 網(wǎng)站
• Gulp 網(wǎng)站
• 在 Microsoft Visual Studio 中使用 Grunt

更多 JavaScript 實(shí)踐

微軟有很多關(guān)于許多開(kāi)源 JavaScript 的免費(fèi)學(xué)習(xí) 主題，我們的使命是與 Microsoft 一起創(chuàng)造更多 邊緣。這里有 一些值得查看的內(nèi)容：

• 微軟Edge網(wǎng)絡(luò)峰會(huì) 2015 年（對(duì)新瀏覽器、新網(wǎng)絡(luò)的期待的完整系列 平臺(tái)功能以及來(lái)自社區(qū)的演講嘉賓）
• 最好的 //BUILD/ 和 Windows 10（包括用于網(wǎng)站和應(yīng)用的新 JavaScript 引擎）
• 推進(jìn) JavaScript 不破壞網(wǎng)絡(luò)（Christian Heilmann 最近的主題演講）
• 托管 Web 應(yīng)用程序和 Web 平臺(tái)創(chuàng)新（深入探討諸如manifold.JS之類(lèi)的主題）
• 使您的 HTML/JavaScript 更快的實(shí)用性能技巧（由七部分組成） 系列（從響應(yīng)式設(shè)計(jì)到休閑游戲再到性能優(yōu)化）
• 現(xiàn)代 Web 平臺(tái)快速入門(mén)（HTML、CSS、 和 JavaScript）

還有一些免費(fèi)的入門(mén)工具：Visual 工作室代碼，Azure 試用和跨瀏覽器 測(cè)試工具——全部適用于 Mac、Linux 或 Windows。

本文是 Microsoft 的 Web 開(kāi)發(fā)技術(shù)系列的一部分。是 很高興與大家分享微軟 Edge 和新的 EdgeHTML 渲染引擎與您同在。 獲取免費(fèi)虛擬機(jī)或在您的 Mac、iOS、Android 或 Windows 設(shè)備 @ http://dev.modern.ie/.

以上是使用Grunt和Gulp實(shí)現(xiàn)JavaScript工作流自動(dòng)化的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！