使用Grunt和Gulp實現JavaScript工作流程自動化-＆＃＆按-PHP中文網

當你剛接觸前端開發時並開始掌握 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 中。那里有两个简单的步骤：

加载插件。
配置任务。

要加载插件，请使用 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 任务并运行其数组中指定的所有任务。您可以修改它以运行 less 和 jshint。注意 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工作流程自動化