當你剛接觸前端開發(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/.