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

#你值得擁有這些好東西。

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

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

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

作為使用這些工具的新手，您 想知道它們?nèi)绾芜\(yùn)作以及使用哪一個(gè)，不是嗎？嗯，那就完美了， 您正在閱讀正確的文章！

1.我們將使用的範(fàn)例

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

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

Styles.less 在 a 中定義 CSS 表 比使用標(biāo)準(zhǔn) CSS 檔案更豐富的方式。最後我們使用 Less 編譯器建立 styles.css 文件。使用 Less，我們可以在 CSS 檔案中使用變數(shù)：

在此入門指南中獲取有關(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。

完成後，您可以執(zhí)行此命令 將 .less 檔編譯為 .css：

lessc styles.less > styles.css

Npm 使用它來建立並儲(chǔ)存在其正在工作的本機(jī)資料夾中的檔案：package.json。 該檔案使用 JavaScript 物件表示法 (JSON) 格式讓 npm 知道 安裝了哪個(gè)工具、版本以及目前專案（用 目前資料夾）。

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

要建立一個(gè)空的 package.json 文件，您 可以使用以下npm指令：

npm init

您將回答一些問題 可以使用預(yù)設(shè)選項(xiàng)回答，然後就可以開始了。

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

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

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

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

第三個(gè)將建立一個(gè) devDependencies 部分/屬性 在 package.json 檔案中。

3. 咕嚕聲

什麼 是咕嚕嗎？

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

Grunt 的基本原理是為我們提供一個(gè)簡(jiǎn)單的方法來運(yùn)行 tasks。任務(wù)是一組程式碼文件 以及已經(jīng)為您建立的設(shè)定檔。您可以透過以下方式取得新任務(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)在讓我們通過分步指南來完成這一切設(shè)置。

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

使用 npm 初始化文件：

npm init

您必須回答一些問題，例如項(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 所需的一切，也就是說：

• 配置 任務(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)目上打開命令提示符 文件夾并運(yùn)行：

grunt

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

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

現(xiàn)在您的 Gruntfile 已準(zhǔn)備就緒，下一步是添加插件 并使用它。所有插件都可以在 Grunt 網(wǎng)站的列表中找到。中的一個(gè) Gruntfile 中執(zhí)行的常見任務(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ī)則來簽入 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 等工具來運(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。 沒關(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)在開始，當(dāng)您運(yùn)行 grunt 時(shí)，它將運(yùn)行 jshint，然后是 less:

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

簡(jiǎn)單吧？

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

現(xiàn)在，您是一名快樂的開發(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

并且每次打開文件時(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ù)，文件通過這些函數(shù) 進(jìn)入并在內(nèi)存中進(jìn)行修改。這 文件只會(huì)在進(jìn)程結(jié)束時(shí)才會(huì)寫入磁盤，所以它更 高效的。另一方面，Grunt 任務(wù)作為孤島工作，無法鏈接。

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

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

與 Grunt 類似，你首先 必須創(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 文件，如下所示：

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

如果執(zhí)行 gulp 指令 在專案資料夾中使用命令提示字元行，您應(yīng)該會(huì)看到類似的結(jié)果 這個(gè)：

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

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

要使用插件，您可以使用您在需要時(shí)選擇的名稱來呼叫它。通常，您將其稱為 串流媒體工作流程的一部分，通常從選擇檔案開始。 這是透過 gulp.src 完成的 功能。它將選擇一堆文件並返回一個(gè)可以使用的流 透過使用 pipe 的另一個(gè)函數(shù)。那 這是您如何連結(jié)多個(gè)操作而不將它們寫入磁碟的方法。你 只需將流從一個(gè)插件傳遞到另一個(gè)插件即可。

這是 Less 的基本範(fàn)例：

我們首先 require ('gulp-less')# ?為 gulp 載入 less 外掛程式。 （我們使用 npm install gulp-less --save-dev 來獲得它）。

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

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

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

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

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

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

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

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

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

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

更多資訊

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

更多 JavaScript 實(shí)作

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

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

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

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

#

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