首頁 >CMS教程 >&#&按 >使用Grunt和Gulp實現JavaScript工作流程自動化

使用Grunt和Gulp實現JavaScript工作流程自動化

WBOY
WBOY原創
2023-08-29 21:49:051053瀏覽

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

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

所以你開始使用所有這些很棒的工具 手動運行越來越多的命令列。有時,你會忘記 執行 Less 編譯器...有時你忘記執行 JSHint 並且會出現錯誤...

突然你發現自己在想: 有沒有解決方案可以自動化所有這些工具?你怎樣才能創建一個 可重複的工作流程以防止您犯錯?

顯然存在一個解決方案,並且有兩個工具 特別是等待您開始使用:Grunt Gulp

作為使用這些工具的新手,您 想知道它們如何運作以及使用哪一個,不是嗎?嗯,那就完美了, 您正在閱讀正確的文章!

1.我們將使用的範例

我會給你使用Grunt的基礎 和 Gulp 使用一個非常簡單的範例,您可以從 GitHub 下載該範例。

這是一個簡單的網站,由三個部分組成 文件:

使用Grunt和Gulp實現JavaScript工作流程自動化

Styles.less 在 a 中定義 CSS 表 比使用標準 CSS 檔案更豐富的方式。最後我們使用 Less 編譯器建立 styles.css 文件。使用 Less,我們可以在 CSS 檔案中使用變數:

使用Grunt和Gulp實現JavaScript工作流程自動化

在此入門指南中獲取有關 Less 的更多資訊。

JavaScript 和 HTML 程式碼確實 簡單的。該頁面應如下所示:

使用Grunt和Gulp實現JavaScript工作流程自動化

2. 了解 Node.js 套件管理器

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

Npm 是 Node.JS 附帶的工具。它 用於取得工具和框架,同時自動解析它們 依賴關係。

例如,使用 Less 並編譯它 到 Web 可用的 CSS 檔案中,您首先需要使用以下命令安裝 Less:

npm install -g less

注意: 若要取得 npm 命令列,您 必須從 Node 網站安裝 Node.js。

完成後,您可以執行此命令 將 .less 檔編譯為 .css:

lessc styles.less > styles.css

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

該檔案對於 Grunt 和 Gulp 很重要 因為它將包含已下載並可在您的應用程式中使用的插件列表 自動化工作流程。

要建立一個空的 package.json 文件,您 可以使用以下npm指令:

npm init

您將回答一些問題 可以使用預設選項回答,然後就可以開始了。

在此文件中,您將有兩種 依賴項:

  • 所需的 執行您的 Web 應用程式或 Node.js 應用程式
  • 所需的 開發階段(如 Less),用於編譯或檢查程式碼

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

  • 在您的機器上全域使用 –g-global 選項
  • 出於執行目的,在本地 在您的專案資料夾中不使用任何選項(僅使用 npm install [工具或框架])
  • 出於開發目的,本地 使用 --save-dev 的專案資料夾 選項

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

使用Grunt和Gulp實現JavaScript工作流程自動化

3. 咕嚕聲

什麼 是咕嚕嗎?

Grunt 是 JavaScript 自動化領域的先驅 工作流程區域。有許多知名的 Grunt 用戶,例如 Twitter、jQuery 和 Modernizr。

Grunt 的基本原理是為我們提供一個簡單的方法來運行 tasks。任務是一組程式碼文件 以及已經為您建立的設定檔。您可以透過以下方式取得新任務 安裝使用 npm 獲得的 Grunt 插件。你可以找到一個插件 幾乎您可能使用的所有工具,例如 Less 和 JSHint。

要运行 Grunt,您必须创建一个 Gruntfile,在其中指定 您要运行哪些任务以及每个任务的配置。一旦这个 完成后,您只需运行 grunt 命令行指定要运行的任务(默认或特定任务) 它会自动完成。

现在让我们通过分步指南来完成这一切设置。

步骤 1. 创建 Package.json 文件

使用 npm 初始化文件:

npm init

您必须回答一些问题,例如项目名称和 默认的 .js 文件是什么。您也可以选择手动创建文件 并将其内容设置为:

{

  "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. 创建 GruntFile.js

Grunt 使用名为 gruntFile.js 的文件进行工作。该文件包含 Grunt 所需的一切,也就是说:

  • 配置 任务
  • custom 任务
  • 任务加载

Grunt 希望文件导出一个需要一个函数的函数 名为“grunt”的参数。您将使用此对象执行所有 Grunt 相关操作 行动。

这是一个最小的 gruntfile,仅读取 package.json 文件 并创建一个 default 任务,该任务不运行任何内容。

注意: 将该文件与 package.json 文件并排放置在项目文件夹中。

module.exports = function(grunt) {



  // Project configuration.

  grunt.initConfig({

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

  });



  // Default task(s).

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



}; 

您可以执行它以确保一切都已配置 正确。

为此,请在项目上打开命令提示符 文件夹并运行:

grunt

您应该看到类似这样的内容:

使用Grunt和Gulp實現JavaScript工作流程自動化

第 4 步:添加您的第一个 任务:JSHint

现在您的 Gruntfile 已准备就绪,下一步是添加插件 并使用它。所有插件都可以在 Grunt 网站的列表中找到。中的一个 Gruntfile 中执行的常见任务是检查 JavaScript 语法是否正确 正确的。为此,我们通常使用 JSHint。

让我们将其添加到您的 grunt 工作流程中。

如果你在 grunt 插件页面搜索 JSHint,你会发现 grunt-contrib-jshint,其中 对应我们所需要的!

在项目文件夹中,运行:

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

完成后,您必须将其添加到 Gruntfile.js 中。那里 有两个简单的步骤:

  1. 加载插件。
  2. 配置 任务。

要加载插件,请使用 loadNpmTasks 功能:

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

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

的 配置是在initConfig 函数中完成的 您必须向参数中给定的对象添加新属性。这 必须是您要添加的任务的名称并且与插件相关 你用。了解该名称和可用选项列表的最佳方式 任务是查看插件文档。你总会找到一个 详细记录的示例。

例如,在 在我们的示例中,我们想要检查除 gruntfile.js 之外的所有 JavaScript 文件。 我们还希望激活一组规则来签入 JavaScript 文件,例如 eqeqeq 以确保我们在需要时使用三等号。

这是 initConfig 函数修改:

使用Grunt和Gulp實現JavaScript工作流程自動化

您可以使用 以下命令行(您将任务名称指定为 grunt 的参数):

grunt jshint

的 result is here:

使用Grunt和Gulp實現JavaScript工作流程自動化

您只需运行该命令即可 遇到任何错误都会自动提示您。

恭喜,您现在已经在 grunt 中自动执行了一项任务 工作流程!

步骤 5. 添加第二个任务: 减少编译

您的 JSHint 任务运行良好,但在 工作流程。通常,我们使用 Grunt 等工具来运行多个任务。

添加更多内容非常容易,因为您只需遵循即可 相同的步骤。假设您现在想要添加 less 的编译 自动化流程中的文件。如果你在 Grunt 插件中搜索,你会 找到一个可以安装在项目文件夹中的 grunt-contrib-less 插件:

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

与 JSHint 任务一样,您必须添加 配置:

使用Grunt和Gulp實現JavaScript工作流程自動化

的n, load the task:

使用Grunt和Gulp實現JavaScript工作流程自動化

您现在可以运行 Grunt 并指定 less 任务:这将仅启动 Less。 没关系,但是您想运行所有任务,对吧?这就是 default 任务的作用。

当你只运行 grunt 而不指定任何任务时,它将搜索 default 任务并运行其数组中指定的所有任务。您可以修改它以运行 lessjshint注意 that to add a group of tasks like default, you need to call the registerTask 功能:

使用Grunt和Gulp實現JavaScript工作流程自動化

从现在开始,当您运行 grunt 时,它将运行 jshint,然后是 less:

使用Grunt和Gulp實現JavaScript工作流程自動化

您可以添加任何您想要的任务,并且您可以 还指定其他任务组,例如 default 并通过将名称作为参数传递给 grunt 命令行来调用它们。

简单吧?

第 6 步:使用“Watch So You Do” 不必手动运行 Grunt

现在,您是一名快乐的开发人员。你所有的重复性任务都是 在 grunt 工作流程中实现自动化,您只需运行 grunt 即可 执行。但它可以更容易地完成。它可以自动完成。

为此,您可以添加名为 watch 的特定任务。此任务将不断检查您的工作文件夹,并且, 根据规则,当文件被修改时,grunt 将运行关联的任务。

首先,在项目文件夹中安装 watch

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

使用 loadNpmTasks 函数像所有其他任务一样加载它,并配置它。配置部分有点 此处有所不同,因为您需要为每个任务指定配置 想要使用 watch 进行覆盖。

使用Grunt和Gulp實現JavaScript工作流程自動化

有关详细信息,您可以阅读此任务的完整文档。

当您想激活watch时,只需运行以下命令:

grunt watch

并且每次打开文件时都会执行任务 已更改,并且此文件位于特定的监视文件范围内 任务。

使用Grunt和Gulp實現JavaScript工作流程自動化

就是这样!你现在知道了要创造的一切 使用 grunt 实现自动化工作流程。

4. 咕噜咕噜

什么 是 Gulp 吗?

Gulp 是 grunt 的替代品。它是一个 更新一点,并且比 grunt 更灵活而闻名。前 选择您要使用的一个后,让我们看看 gulp 是如何工作的。

Gulp 是一个工作流程 自动化工具。与 grunt 一样,它使用 npm 和 package.json 文件工作。全部可用 插件也将使用 npm 下载并添加为 devDependencies 在 package.json 文件。

主要区别之一是 Gulp 使用流。流是一组函数,文件通过这些函数 进入并在内存中进行修改。这 文件只会在进程结束时才会写入磁盘,所以它更 高效的。另一方面,Grunt 任务作为孤岛工作,无法链接。

让我们快速了解一下 Gulp 的工作原理: 遵循几个简单的步骤。

步骤 1. 创建 Package.json 文件

与 Grunt 类似,你首先 必须创建 package.json 文件。您可以使用与您完全相同的技术 用于 grunt 示例。

步骤 2. 安装 Gulp 并 Gulp-Util 全球和本地

创建 package.json 文件后,全局安装 gulp 并 本地使用:

npm install -g gulp

npm install gulp --save-dev

这将安装 gulp 命令行以及所需的一切 运行 gulp 工作流程。

然后您必须安装 gulp utils,其中包含其他插件共享的常用功能:

npm install gulp-util --save-dev

最后,创建最小的 gulp 文件,如下所示:

使用Grunt和Gulp實現JavaScript工作流程自動化

如您所見,它與 grunt 語法有點不同。在 gulp,外掛程式使用 require 語法加載,就像您可能習慣的那樣 您是一名 Node.js 開發人員。還有一個使用 gulp.task 函數定義的 default 任務。

如果執行 gulp 指令 在專案資料夾中使用命令提示字元行,您應該會看到類似的結果 這個:

使用Grunt和Gulp實現JavaScript工作流程自動化

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

要在 gulp 中使用插件,您可以使用與我們相同的函數 用於建立 default 任務。 這是因為您不必使用特定名稱來建立任務。你 只需呼叫 gulp.task,設定您想要的名稱,並為其指定一個 JavaScript 函數,如下所示 第二個參數。當 gulp 運行任務時,它會執行這個函數。

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

這是 Less 的基本範例:

使用Grunt和Gulp實現JavaScript工作流程自動化

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

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

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

的 power of gulp is that you can create custom tasks in which you 呼叫多個插件,您可以在其中按照您想要的方式將它們關聯起來。

注意: there is obviously 還有一個 gulp-watch 插件,您可以使用 自動啟動您的工作流程!

結論:選擇哪一個?

希望您現在已經有了更清晰的認識 了解為什麼需要自動化工作流程以及如何使用 Grunt 或 Gulp 來獲得它。

選擇其中之一更與 您想要實現的任務。

Grunt 很容易使用。你不必 了解管道系統,完成簡單的任務會更容易 直截了當。這是一個非常成熟的工具,被許多知名編輯使用 和開發人員,並且有很多可用的插件。

也就是說,Gulp 的設計方式 可以給你很大的靈活性。它已經存在相當長一段時間了,而且 即使您找不到像 Grunt 那樣多的插件,所有經典的插件 一些可用於 Gulp。

如果您使用的是真正標準的工作流程 對於 JSHint、uglifying、CSS 驗證等常見步驟,Grunt 是一個不錯的選擇 選擇。如果您要執行更複雜的任務,Gulp 將是一個很好的僚機。

更多資訊

  • Grunt 網站
  • Gulp 網站
  • 在 Microsoft Visual Studio 中使用 Grunt

更多 JavaScript 實作

微軟有很多關於許多開源 JavaScript 的免費學習 主題,我們的使命是與 Microsoft 一起創造更多 邊緣。這裡有 一些值得查看的內容:

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

還有一些免費的入門工具:Visual 工作室代碼,Azure 試試和跨瀏覽器 測試工具-全部適用於 Mac、Linux 或 Windows。

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

#

以上是使用Grunt和Gulp實現JavaScript工作流程自動化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多