Grunt、Gulp.js 和 Bower 之間有什么區別？ 為什么以及何時使用它們？

Question

Grunt、Gulp.js 和 Bower 之間有什么區別？ 為什么以及何時以及如何使用它們？

我現在看到，大多數前端項目都使用上述工具，盡管我在最近的項目中使用它們，但我正在使用 gulp 使用類似的腳本構建 HTML、CSS 和 JavaScript

$ gulp build

但是對這些前端框架都不太了解，請大家幫我全面了解Grunt、Gulp.js和Bower。

Answer 1

從本質上講， Gulp和Grunt都是用於自動執行一系列相互依賴的任務的系統，並且在很多細節方面都揮之不去，通常用於定義項目的“構建”，就像現代版的make工具一樣。 通常，一個項目使用其中一個或另一個，但不會同時使用兩者（無論如何，對於相同的部分）。

Bower是不同的，並且經常與 Gulp 或 Grunt 一起使用：它是客戶端庫的包管理器，可以輕松地使這些庫保持最新，以標准化方式指定它們及其依賴項，等等。

他們網站上的 Gulp one-liner：

自動化和增強您的工作流程

他們的 Grunt one-liner：

JavaScript 任務運行器

還有鮑爾：

網絡包管理器

---

為什么以及何時使用它們？

我認為以上內容涵蓋了 Gulp 和 Grunt：如果您有想要自動化的任務（例如構建具有縮小、串聯、壓縮等功能的網站的發布版本；或者在更改時查看文件並重新運行任務）更改以支持快速開發），您可以使用 Gulp 和 Grunt。

但這不僅僅是構建。 您可以將 Gulp 和 Grunt 用於需要自動化的任何系列任務。

Bower 可用於管理項目中的客戶端庫。 您可以使用 Bower 安裝最新版本的 Bootstrap，它會將相關文件放在您項目中的標准位置。 如果更新的 Bootstrap 出現，Bower 可以更新這些文件。 如果一個庫依賴於其他庫（例如，Bootstrap 的 JS 依賴於 jQuery），Bower 會幫助管理該樹。 Grunt 有一些有用的任務（我假設 Gulp）甚至可以自動將腳本和鏈接標簽添加到這些庫的 HTML 中，方法是在你的源 HTML 中放置一個占位符，基本上說“把 Bower 庫放在這里”。

Answer 2

gulp和Grunt是任務運行器。 它們是解決同一問題的不同方法。 Grunt使用基於配置的方法，而gulp使用來自node流來實現結果。 您可以使用它們來定義如何執行以及執行哪些任務（復制文件、添加橫幅、替換文本、樣式檢查等...）。 它們（通常）從命令行手動運行。

例如，如果復制和修改文件Grunt將創建中間文件，而gulp將利用node的流並動態轉換。

何時使用Grunt或gulp是不太具體的答案，因為它考慮了個人偏好、技術支持（某些任務的插件）、項目細節和易於配置。 兩者都相對容易啟動和運行，但通常您最終會選擇一個為您的項目使用的技術堆棧具有更好插件的（盡管兩者都有良好的插件支持）。

Bower是包管理器。 它用於安裝 javascript（主要是客戶端）包（但是npm - 也是包管理器 - 也包含幾乎所有這些模塊/包。您可以使用它來自動化依賴項管理和包安裝。

Answer 3

繼續擔任 TJ Crowder 的職位，Bower 與 NPM、Composer 或 Gem 非常相似。 NPM 和 Bower 之間最大的區別在於，bower 用於前端包，而 NPM（曾經）用於后端包。 NPM 現在做前端包和后端包。
此外，您需要 NPM 來安裝 Bower。

Grunt 是第一個可用的前端任務自動化程序。 它提供了比當時可用的更好的體驗。 它仍然有大量的追隨者和活躍的社區。

在某種程度上，Gulp 來自 grunt，並通過使用流而不是文件對其進行了改進。

Grunt 將更改寫入文件，並加載到該文件中以進行更多操作。 Gulp 讀取一個文件，並對數據流進行所有轉換，並且只有在所有操作完成后才寫入。 這意味着它是異步的並且比 grunt 更快。 我相信 Gulp 應該用於支持 grunt 的新項目。
可能有一些很好的用例，其中 grunt preforms 比 gulp 更好，但通常 gulp 更快。

Answer 4

我剛剛完成了對 Gulp 與 Grunt（我們之前的標准）的分析，雖然我認為對於前端開發人員來說，了解兩者都很重要，但兩者都是很好的解決方案，我為未來的項目學習了 Gulp，原因如下：

1. Gulp 通常更簡潔（插件只做一件事，流方法）和可讀性更強。 我在 Gulp 中重做的一個 Grunt 腳本導致只有四分之一的代碼行產生相同的結果。

2. Gulp 通常更快。

3. 盡管 Gulp 有更少的插件和更薄的文檔關鍵插件，用於縮小、連接、列表、LESS 轉譯等目前可用並且運行良好。