web-dev-qa-db-ja.com

Grunt、Gulp.js、およびBowerの違いは何ですか？それらを使用する理由とタイミング

Grunt、Gulp.js、およびBowerの違いは何ですか？なぜ、いつ、どのように使用するのですか？

私は最近見ましたが、ほとんどのフロントエンドプロジェクトは上記のツールを使用していますが、最近のプロジェクトで使用しているように、gulpを使用してHTML、CSS、およびJavaScriptを作成します

$ gulp build

これらのフロントエンドフレームワークのすべてをあまり理解していないので、Grunt、Gulp.js、およびBowerの全体的な理解を得るのに役立ててください。

javascripthtmlgruntjsgulpbower
41
Subodh Ghulaxe

本質的に、多くの詳細の手を振りながら、 Gulp と Grunt は両方とも相互依存タスクのシリーズを自動化するためのシステムであり、「ビルドmakeツールの最新のテイクのように、プロジェクトの通常、プロジェクトはそれらの一方または他方を使用しますが、両方を同時に使用することはありません（とにかく、同じパーツに対して）。

Bower は異なり、GulpまたはGruntで頻繁に使用されます：クライアント側ライブラリのパッケージマネージャーであり、それらのライブラリを最新の状態に保ち、それらとその依存関係を標準化された方法で簡単に指定できます、など。

WebサイトのGulpワンライナー：

ワークフローを自動化して強化する

彼らのGruntワンライナー：

JavaScriptタスクランナー

そしてバウアー：

Web用のパッケージマネージャー

それらを使用する理由とタイミング

GulpとGruntについては上記をカバーしていると思います：自動化するタスクがある場合（縮小、連結、圧縮などを使用してWebサイトのリリースバージョンを構築する、または変更を確認してファイルを監視し、タスクを再実行するなど）迅速な開発をサポートするための変更）、GulpとGruntを使用できます。

しかし、それは単なるビルドではありません。自動化する必要がある一連のタスクにGulpとGruntを使用できます。

Bowerは、プロジェクトのクライアント側ライブラリを管理するのに役立ちます。 Bowerを使用して、たとえば最新バージョンのBootstrapをインストールすると、関連するファイルがプロジェクトの標準の場所に配置されます。 Bowerは、新しいBootstrapが出てきた場合、それらのファイルを更新できます。ライブラリが他のライブラリに依存している場合（BootstrapのJSはjQueryに依存します）、Bowerはそのツリーの管理を支援します。ソースHTMLに基本的に「ここにBowerライブラリを置く」というプレースホルダーを持たせることで、これらのライブラリのHTMLへのスクリプトとリンクタグの追加を自動化することもできるGrunt（そしてGulpの場合も想定）。

47
T.J. Crowder

gulpとGruntはタスクランナーです。同じ問題に対する異なるアプローチです。 Gruntは構成ベースのアプローチを使用し、gulpはnodeからのストリームを使用して結果を達成します。それらを使用して、実行する方法とタスクを定義します（ファイルのコピー、バナーの追加、テキストの置換、スタイルチェックなど）。それらは（通常）コマンドラインから手動で実行されます。

たとえば、ファイルをコピーおよび変更すると、Gruntが中間ファイルを作成し、gulpがnodeのストリームを活用してその場で変換します。

Gruntまたはgulpを使用する場合は、個人的な好み、技術サポート（特定のタスクのプラグイン）、プロジェクトの詳細、および構成の容易さを考慮するため、あまり明確な答えではありません。どちらも比較的簡単に起動して実行できますが、通常、プロジェクトで使用されるテクノロジースタック用のより良いプラグインを選択することになります（ただし、どちらも優れたプラグインサポートを備えています）。

Bowerはパッケージマネージャーです。 javascript（主にクライアント側）パッケージのインストールに使用されます（ただし、npm-また、パケットマネージャー-これらのモジュール/パッケージのほとんどすべてが含まれます。依存関係管理とパッケージのインストールを自動化するために使用します。

14
edin-m

t.J.のポストを続けるCrowder、BowerはNPM、またはComposerまたはGemに非常に似ています。NPMとBowerの最大の違いは、bowerはフロントエンドパッケージ用で、NPM（以前は）はバックエンドパッケージ用です。 NPMは、フロントエンドパッケージとバックエンドパッケージを実行するようになりました。
また、BowerをインストールするにはNPMが必要です。

Gruntは、これらのフロントエンドタスク自動化ツールの最初のものでした。それは当時利用可能であったものよりも良い経験を与えました。まだ大きな支持者と活発なコミュニティがあります。

Gulpはある意味で無愛想であり、ファイルではなくストリームを使用することで改善されています。

Gruntはファイルに変更を書き込み、そのファイルにロードしてさらに操作します。 Gulpはファイルを読み取り、データストリーム上ですべての変換を行い、すべての操作が完了した後にのみ書き込みます。それは非同期であり、うなり声よりも速いことを意味します。そして、私はGulpを、うなり声を支持して新しいプロジェクトに使用すべきだと思います。
。

9
Pjetr

Gulp vs Grunt（以前の標準）の分析を完了しましたが、どちらもフロントエンド開発者が最新であるために知っておくことが重要だと思いますが、両方とも次の理由で将来のプロジェクトのためにGulpに向けて学ぶ良いソリューションです：

  1. Gulpは通常、より簡潔（プラグインが1つのことだけを行い、ストリームアプローチ）で読みやすいです。 Gulpで再編集した1つのGruntスクリプトは、同じ結果を生成するコード行の4分の1に過ぎませんでした。

  2. 一般的にGulpは高速です。

  3. Gulpにはプラグインが少なく、ドキュメントの縮小、連結、一覧表示、LESSトランスピレーションなどの主要なプラグインは現在利用可能であり、うまく機能しています。
6
Anish Rai