當你剛接觸前端開發(fā)時 并開始掌握 HTML5、CSS 和 JavaScript，下一步顯然是 您手中的工具最 開發(fā)人員習慣在這個復雜的空間中保持理智。你也值得擁有更多 使用 Less 編寫 CSS 表時的靈活性和功能。你也是 值得通過縮小 JS 代碼來優(yōu)化帶寬。你也值得成為 能夠使用 JSHint 自動檢查您的 JS 代碼是否良好。
你值得擁有這些好東西。
所以你開始使用所有這些很棒的工具 手動運行越來越多的命令行。有時，你會忘記 運行 Less 編譯器…有時你忘記運行 JSHint 并且會出現(xiàn)錯誤…
突然你發(fā)現(xiàn)自己在想： 有沒有解決方案可以自動化所有這些工具？你怎樣才能創(chuàng)建一個 可重復的工作流程以防止您犯錯誤？
顯然存在一個解決方案，并且有兩個工具 特別是等待您開始使用：Grunt 和Gulp。
作為使用這些工具的新手，您 想知道它們?nèi)绾喂ぷ饕约笆褂媚囊粋€，不是嗎？嗯，那就完美了， 您正在閱讀正確的文章！
1.我們將使用的示例
我會給你使用Grunt的基礎 和 Gulp 使用一個非常簡單的示例，您可以從 GitHub 下載該示例。
這是一個簡單的網(wǎng)站，由三個部分組成 文件：
Styles.less 在 a 中定義 CSS 表 比使用標準 CSS 文件更豐富的方式。最后我們使用 Less 編譯器創(chuàng)建 styles.css 文件。使用 Less，我們可以在 CSS 文件中使用變量：
在此入門指南中獲取有關 Less 的更多信息。
立即學習“Java免費學習筆記（深入）”；
JavaScript 和 HTML 代碼確實 簡單的。該頁面應如下所示：
2.?了解 Node.js 包管理器
您需要首先了解 Node.js 包管理器 (npm) 的工作原理。
Npm 是 Node.JS 附帶的工具。它 用于獲取工具和框架，同時自動解析它們 依賴關系。
例如，使用 Less 并編譯它 到 Web 可用的 CSS 文件中，您首先需要使用以下命令安裝 Less：
npm install -g less
注意： 要獲取 npm 命令行，您 必須從 Node 網(wǎng)站安裝 Node.js。
完成后，您可以運行此命令 將 .less 文件編譯為 .css：
lessc styles.less > styles.css
Npm 使用它創(chuàng)建并存儲在其正在工作的本地文件夾中的文件：package.json。 該文件使用 JavaScript 對象表示法 (JSON) 格式讓 npm 知道 安裝了哪個工具、版本以及當前項目（用 當前文件夾）。
該文件對于 Grunt 和 Gulp 很重要 因為它將包含已下載并可在您的應用程序中使用的插件列表 自動化工作流程。
要創(chuàng)建一個空的 package.json 文件，您 可以使用以下npm命令：
npm init
您將回答一些問題 可以使用默認選項回答，然后就可以開始了。
在此文件中，您將有兩種 依賴項：
- 所需的 執(zhí)行您的 Web 應用程序或 Node.js 應用程序
- 所需的 開發(fā)階段（如 Less），用于編譯或檢查代碼
Npm 基本上為您提供了三種方法 安裝包：
- 在您的機器上全局使用 –g 或 -global 選項
- 出于執(zhí)行目的，在本地 在您的項目文件夾中不使用任何選項（僅使用 npm install [工具或框架]）
- 出于開發(fā)目的，本地 使用 –save-dev 的項目文件夾 選項
第三個將創(chuàng)建一個 devDependencies 部分/屬性 在 package.json 文件中。
3. 咕嚕聲
什么 是咕嚕嗎？
Grunt 是 JavaScript 自動化領域的先驅(qū) 工作流程區(qū)域。有很多知名的 Grunt 用戶，例如 Twitter、jQuery 和 Modernizr。
Grunt 的基本原理是為我們提供一種簡單的方法來運行 tasks。任務是一組代碼文件 以及已經(jīng)為您創(chuàng)建的配置文件。您可以通過以下方式獲取新任務 安裝使用 npm 獲得的 Grunt 插件。你可以找到一個插件 幾乎您可能使用的所有工具，例如 Less 和 JSHint。
要運行 Grunt，您必須創(chuàng)建一個 Gruntfile，在其中指定 您要運行哪些任務以及每個任務的配置。一旦這個 完成后，您只需運行 grunt 命令行指定要運行的任務（默認或特定任務） 它會自動完成。
現(xiàn)在讓我們通過分步指南來完成這一切設置。
步驟 1. 創(chuàng)建 Package.json 文件
使用 npm 初始化文件：
npm init
您必須回答一些問題，例如項目名稱和 默認的 .js 文件是什么。您也可以選擇手動創(chuàng)建文件 并將其內(nèi)容設置為：
{ "name": "project-name", "devDependencies": {}, "dependencies": {} }
步驟 2. 安裝 Grunt 全球和本地
您需要全局安裝 Grunt 才能獲取命令行并 在本地初始化項目所需的一切。
運行：
npm install -g grunt
然后在本地運行：
npm install grunt --save-dev
注意： Do not forget the –dev 部分，將其指定為 devDependencies 中的 package.json 文件之一。
步驟 3. 創(chuàng)建 GruntFile.js
Grunt 使用名為 gruntFile.js 的文件進行工作。該文件包含 Grunt 所需的一切，也就是說：
- 配置 任務
- custom 任務
- 任務加載
Grunt 希望文件導出一個需要一個函數(shù)的函數(shù) 名為“grunt”的參數(shù)。您將使用此對象執(zhí)行所有 Grunt 相關操作 行動。
這是一個最小的 gruntfile，僅讀取 package.json 文件 并創(chuàng)建一個 default 任務，該任務不運行任何內(nèi)容。
注意： 將該文件與 package.json 文件并排放置在項目文件夾中。
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), }); // Default task(s). grunt.registerTask('default', []); };?
您可以執(zhí)行它以確保一切都已配置 正確。
為此，請在項目上打開命令提示符 文件夾并運行：
grunt
您應該看到類似這樣的內(nèi)容：
第 4 步：添加您的第一個 任務：JSHint
現(xiàn)在您的 Gruntfile 已準備就緒，下一步是添加插件 并使用它。所有插件都可以在 Grunt 網(wǎng)站的列表中找到。中的一個 Gruntfile 中執(zhí)行的常見任務是檢查 JavaScript 語法是否正確 正確的。為此，我們通常使用 JSHint。
讓我們將其添加到您的 grunt 工作流程中。
如果你在 grunt 插件頁面搜索 JSHint，你會發(fā)現(xiàn) grunt-contrib-jshint，其中 對應我們所需要的！
在項目文件夾中，運行：
npm install grunt-contrib-jshint --save-dev
完成后，您必須將其添加到 Gruntfile.js 中。那里 有兩個簡單的步驟：
- 加載插件。
- 配置 任務。
要加載插件，請使用 loadNpmTasks 功能：
// Load the plugin that provides the "jshint" task grunt.loadNpmTasks('grunt-contrib-jshint');
的 配置是在initConfig 函數(shù)中完成的 您必須向參數(shù)中給定的對象添加新屬性。這 必須是您要添加的任務的名稱并且與插件相關 你用。了解該名稱和可用選項列表的最佳方式 任務是查看插件文檔。你總會找到一個 詳細記錄的示例。
例如，在 在我們的示例中，我們想要檢查除 gruntfile.js 之外的所有 JavaScript 文件。 我們還希望激活一組規(guī)則來簽入 JavaScript 文件，例如 eqeqeq?以確保我們在需要時使用三等號。
這是 initConfig 函數(shù)修改：
您可以使用 以下命令行（您將任務名稱指定為 grunt 的參數(shù)）：
grunt jshint
的 result is here:
您只需運行該命令即可 遇到任何錯誤都會自動提示您。
恭喜，您現(xiàn)在已經(jīng)在 grunt 中自動執(zhí)行了一項任務 工作流程！
步驟 5. 添加第二個任務： 減少編譯
您的 JSHint 任務運行良好，但在 工作流程。通常，我們使用 Grunt 等工具來運行多個任務。
添加更多內(nèi)容非常容易，因為您只需遵循即可 相同的步驟。假設您現(xiàn)在想要添加 less 的編譯 自動化流程中的文件。如果你在 Grunt 插件中搜索，你會 找到一個可以安裝在項目文件夾中的 grunt-contrib-less 插件：
npm install grunt-contrib-less --save-dev
與 JSHint 任務一樣，您必須添加 配置：
的n, load the task:
您現(xiàn)在可以運行 Grunt 并指定 less 任務：這將僅啟動 Less。 沒關系，但是您想運行所有任務，對吧？這就是 default 任務的作用。
當你只運行 grunt 而不指定任何任務時，它將搜索 default 任務并運行其數(shù)組中指定的所有任務。您可以修改它以運行 less 和 jshint。 注意 that to add a group of tasks like default, you need to call the registerTask 功能：
從現(xiàn)在開始，當您運行 grunt 時，它將運行 jshint，然后是 less:
您可以添加任何您想要的任務，并且您可以 還指定其他任務組，例如 default 并通過將名稱作為參數(shù)傳遞給 grunt 命令行來調(diào)用它們。
簡單吧？
第 6 步：使用“Watch So You Do” 不必手動運行 Grunt
現(xiàn)在，您是一名快樂的開發(fā)人員。你所有的重復性任務都是 在 grunt 工作流程中實現(xiàn)自動化，您只需運行 grunt 即可 執(zhí)行。但它可以更容易地完成。它可以自動完成。
為此，您可以添加名為 watch 的特定任務。此任務將不斷檢查您的工作文件夾，并且， 根據(jù)規(guī)則，當文件被修改時，grunt 將運行關聯(lián)的任務。
首先，在項目文件夾中安裝 watch ：
npm install grunt-contrib-watch --save-dev
使用 loadNpmTasks 函數(shù)像所有其他任務一樣加載它，并配置它。配置部分有點 此處有所不同，因為您需要為每個任務指定配置 想要使用 watch 進行覆蓋。
有關詳細信息，您可以閱讀此任務的完整文檔。
當您想激活watch時，只需運行以下命令：
grunt watch
并且每次打開文件時都會執(zhí)行任務 已更改，并且此文件位于特定的監(jiān)視文件范圍內(nèi) 任務。
就是這樣！你現(xiàn)在知道了要創(chuàng)造的一切 使用 grunt 實現(xiàn)自動化工作流程。
4. 咕嚕咕嚕
什么 是 Gulp 嗎？
Gulp 是 grunt 的替代品。它是一個 更新一點，并且比 grunt 更靈活而聞名。前 選擇您要使用的一個后，讓我們看看 gulp 是如何工作的。
Gulp 是一個工作流程 自動化工具。與 grunt 一樣，它使用 npm 和 package.json 文件工作。全部可用 插件也將使用 npm 下載并添加為 devDependencies 在 package.json 文件。
主要區(qū)別之一是 Gulp 使用流。流是一組函數(shù)，文件通過這些函數(shù) 進入并在內(nèi)存中進行修改。這 文件只會在進程結(jié)束時才會寫入磁盤，所以它更 高效的。另一方面，Grunt 任務作為孤島工作，無法鏈接。
讓我們快速了解一下 Gulp 的工作原理： 遵循幾個簡單的步驟。
步驟 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 命令行以及所需的一切 運行 gulp 工作流程。
然后您必須安裝 gulp utils，其中包含其他插件共享的常用功能：
npm install gulp-util --save-dev
最后，創(chuàng)建最小的 gulp 文件，如下所示：
如您所見，它與 grunt 語法有點不同。在 gulp，插件使用 require 語法加載，就像您可能習慣的那樣 您是一名 Node.js 開發(fā)人員。還有一個使用 gulp.task 函數(shù)定義的 default 任務。
如果運行 gulp 命令 在項目文件夾中使用命令提示符行，您應該看到類似的結(jié)果 這個：
步驟 3. 使用您的第一個 Task: 減少編譯
要在 gulp 中使用插件，您可以使用與我們相同的函數(shù) 用于創(chuàng)建 default 任務。 這是因為您不必使用特定名稱來創(chuàng)建任務。你 只需調(diào)用 gulp.task，設置您想要的名稱，并為其指定一個 JavaScript 函數(shù)，如下所示 第二個參數(shù)。當 gulp 運行任務時，它會運行這個函數(shù)。
要使用插件，您可以使用您在需要時選擇的名稱來調(diào)用它。通常，您將其稱為 流媒體工作流程的一部分，通常從選擇文件開始。 這是通過 gulp.src 完成的 功能。它將選擇一堆文件并返回一個可以使用的流 通過使用 pipe 的另一個函數(shù)。那 這是您如何鏈接多個操作而不將它們寫入磁盤的方法。你 只需將流從一個插件傳遞到另一個插件即可。
這是 Less 的基本示例：
我們首先 require (‘gulp-less’) ?為 gulp 加載 less 插件。 （我們使用 npm install gulp-less –save-dev 獲得它）。
的n gulp.src will 選擇所有 .less 文件，我們 將其“通過管道”傳遞給 less() 函數(shù)并 它最終被“管道”到 gulp.dest 指示將結(jié)果寫入何處。由于 gulp.src 可以選擇多個文件， gulp.dest 指定一個文件夾。
一旦了解了管道模型，您就可以輕松獲得相同的結(jié)果 結(jié)果就是我們使用 grunt 得到的結(jié)果。
的 power of gulp is that you can create custom tasks in which you 調(diào)用多個插件，您可以在其中按照您想要的方式將它們關聯(lián)起來。
注意： there is obviously 還有一個 gulp-watch 插件，您可以使用 自動啟動您的工作流程！
結(jié)論：選擇哪一個？
希望您現(xiàn)在已經(jīng)有了更清晰的認識 了解為什么需要自動化工作流程以及如何使用 Grunt 或 Gulp 來獲得它。
選擇其中之一更與 您想要實現(xiàn)的任務。
Grunt 很容易使用。你不必 了解管道系統(tǒng)，完成簡單的任務會更容易 直截了當。這是一個非常成熟的工具，被很多知名編輯使用 和開發(fā)人員，并且有很多可用的插件。
也就是說，Gulp 的設計方式 可以給你很大的靈活性。它已經(jīng)存在相當長一段時間了，而且 即使您找不到像 Grunt 那樣多的插件，所有經(jīng)典的插件 一些可用于 Gulp。
如果您使用的是真正標準的工作流程 對于 JSHint、uglifying、CSS 驗證等常見步驟，Grunt 是一個不錯的選擇 選擇。如果您要執(zhí)行更復雜的任務，Gulp 將是一個很好的僚機。
更多信息
- Grunt 網(wǎng)站
- Gulp 網(wǎng)站
- 在 Microsoft visual studio 中使用 Grunt
更多 JavaScript 實踐
微軟有很多關于許多開源 JavaScript 的免費學習 主題，我們的使命是與 Microsoft 一起創(chuàng)造更多 邊緣。這里有 一些值得查看的內(nèi)容：
- 微軟Edge網(wǎng)絡峰會 2015 年（對新瀏覽器、新網(wǎng)絡的期待的完整系列 平臺功能以及來自社區(qū)的演講嘉賓）
- 最好的 //BUILD/ 和 Windows 10（包括用于網(wǎng)站和應用的新 JavaScript 引擎）
- 推進 JavaScript 不破壞網(wǎng)絡（Christian Heilmann 最近的主題演講）
- 托管 Web 應用程序和 Web 平臺創(chuàng)新（深入探討諸如manifold.JS之類的主題）
- 使您的 HTML/JavaScript 更快的實用性能技巧（由七部分組成） 系列（從響應式設計到休閑游戲再到性能優(yōu)化）
- 現(xiàn)代 Web 平臺快速入門（HTML、CSS、 和 JavaScript）
還有一些免費的入門工具：Visual 工作室代碼，Azure 試用和跨瀏覽器 測試工具——全部適用于 Mac、Linux 或 Windows。
本文是 Microsoft 的 Web 開發(fā)技術(shù)系列的一部分。是 很高興與大家分享微軟 Edge 和新的 EdgeHTML 渲染引擎與您同在。 獲取免費虛擬機或在您的 Mac、iOS、Android 或 Windows 設備 @ http://dev.modern.ie/.
