Grunt、NPM、Bowerの違い（package.jsonとbower.json）

Question

私は最初のアプリをemberjs :)にビルドして、npmとbowerを使うのが初めてです。
私はRailsについて少し経験があるので、依存関係を一覧表示するためのファイルの考え方（バンドラーGemfileなど）に精通しています。

質問：パッケージを追加したい（そして依存関係をgitにチェックインしたい）とき、それはどこに属していますか - package.jsonまたはbower.jsonに入っていますか？

私が集めるものから、
bower installを実行すると、パッケージを取得して/vendorディレクトリに配置します。
npm installを実行すると、それを取得して/node_modulesディレクトリに配置します。

これはSO answer です。bowerはフロントエンド用で、npmはバックエンド用です。
Ember-app-kit 一見したところ、この区別に準拠しているようです.../gruntfileにある一部の機能の有効化 2つの明示的なコマンドの指定ここに。

直感的に思います

npm install --save-devパッケージ名 は、package-nameを私のpackage.jsonに追加するのと同じです。
bower install --save package-name 私のbower.json _にパッケージを追加して bower install ？を実行するのと同じかもしれません。

その場合は、依存関係を管理するファイルにそれらを追加せずに（グローバルにコマンドラインツールをインストールするのとは別に）明示的にそのようなパッケージをインストールする必要がありますか。

Pawel · Accepted Answer

2016年半ばに更新 ：

状況は非常に急速に変化しているため、2017年の後半になると、この回答はもう最新ではない可能性があります。

初心者はすぐにビルドツールやワークフローの選択に迷うことができますが、2016年に最新のものはBower、Grunt、またはGulpをまったく使用していません！ Webpackの助けを借りて、あなたはNPMで直接すべてをすることができます！

Googleの「ビルドツールとしてのnpm」の結果： https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
Webpack： https://webpack.github.io/docs/installation.html

私のレガシープロジェクトではGULPを使用していますが、このワークフローで作業している最高の企業や開発者でこれが行われています。

このテンプレートを見てくださいそれは最高と最新の技術の混合物からなる非常に最新の設定です： https://github.com/coryhouse/react-slingshot

Webpack
ビルドツールとしてのNPM（Gulp、Grunt、Bowerなし）
Reduxと反応する
ESLint
リストは長いです。行って探検！

あなたの質問：

パッケージを追加したい（そして依存関係をgitにチェックインしたい）とき、それはどこに属しますか - package.jsonまたはbower.jsonに。

すべてがpackage.jsonに属しています
ビルドに必要な依存関係は "devDependencies"、すなわちnpm install require-dir --save-devにあります（--save-devはdevDependenciesにエントリを追加することによってあなたのpackage.jsonを更新します）
実行時にアプリケーションに必要な依存関係は「依存関係」、すなわちnpm install lodash --saveにあります（--saveは依存関係にエントリを追加することによってpackage.jsonを更新します）。

その場合は、依存関係を管理するファイルにそれらを追加せずに（グローバルにコマンドラインツールをインストールするのとは別に）明示的にそのようなパッケージをインストールする必要がありますか。

常に。快適さだけの理由で。フラグ（--save-devまたは--save）を追加すると、depsを管理するファイル（package.json）が自動的に更新されます。手動で依存関係を編集して時間を無駄にしないでください。 npm install --save-dev package-nameのショートカットはnpm i -D package-nameで、npm install --save package-nameのショートカットはnpm i -S package-nameです

sachinjain024 · Answer

NpmとBowerはどちらも依存関係管理ツールです。しかし両者の主な違いはnpmはNode jsモジュールのインストールに使用されますが、bower jsはhtml、css、jsなどのフロントエンドコンポーネントの管理に使用されますです。

これをもっと混乱させるのは、npmがgruntやjshintのように、フロントエンド開発にも使えるパッケージをいくつか提供していることです。

これらの行はより多くの意味を追加します

Npmとは異なり、Bowerはメインファイルと見なされる複数のファイル（例：.js、.css、.html、.png、.ttf）を持つことができます。 Bowerは、これらのメインファイルをまとめてパッケージ化した場合は、意味的にコンポーネントと見なします。

Edit：GruntはNpmやBowerとはかなり異なります。 GruntはJavaScriptタスクランナーツールです。あなたはそうでなければ手動でしなければならなかったgruntを使って多くのことをすることができます。 Gruntの用途のいくつかを強調します。

いくつかのファイルを圧縮する（例：zipupプラグイン）
Jsファイルをリンティングする（jshint）
少ないファイルをコンパイルする（grunt-contrib-less）

安全なコンパイル、あなたのjavascriptを醜くすること、ファイル/フォルダをコピーすること、javascriptを縮小することなどのための厄介なプラグインがあります。

Gruntプラグインもnpmパッケージです。

質問1

パッケージを追加したい（そして依存関係をgitにチェックインしたい）とき、それはどこに属しますか - package.jsonまたはbower.jsonに。

それは本当にこのパッケージがどこに属しているのかによって異なります。それが（grunt、requestのような）ノードモジュールであるなら、それはそうでなければbower jsonにpackage.jsonに入ります。

質問2

依存関係を管理するファイルに追加せずに、そのようなパッケージを明示的にインストールする必要がある場合

パッケージを明示的にインストールするのか、.jsonファイル内の依存関係について言及するのかは関係ありません。あなたがノードプロジェクトで作業している最中で、requestと言う別のプロジェクトが必要だとすると、2つの選択肢があります。

Package.jsonファイルを編集して、 'request'への依存関係を追加します
npmインストール

OR

コマンドラインを使用：npm install --save request

--saveオプションはpackage.jsonファイルにも依存関係を追加します。 --saveオプションを指定しなければ、パッケージをダウンロードするだけですが、jsonファイルは影響を受けません。

どちらでも構いませんが、大きな違いはありません。

Saniya syed qureshi · Answer

Bower

Bowerはフロントエンド開発専用に作成され、それを考慮して最適化されています。フラットな依存関係ツリーを使用し、各パッケージに1つのバージョンしか必要としないため、ページの負荷が軽減されます。これは主に最小限のリソース負荷を目的としています。

Bowerにはbower.jsonという設定ファイルがあります。このファイルでは、Bowerの設定、必要な依存関係、ライセンスの詳細、説明、名前などを設定できます。

Bowerは、jquery、Angular、反応、Ember、ノックアウト、バックボーンなどのフロントエンドパッケージに適しています。

Npm（ノードパッケージマネージャ）

NpmはNode.jsモジュールの管理に最も一般的に使用されていますが、フロントエンドにも機能します。これはネストされた依存関係ツリーを使用します。つまり、あなたの依存関係はそれら自身の依存関係を持つことができます。依存関係ツリーがネストされているということは、依存関係がそれぞれ独自の依存関係を持つことができるということです。これは、スペースや待ち時間をあまり気にする必要がないサーバーでは、本当に素晴らしいことです。

私たちのプロジェクトではjQueryが必要なので、これは明らかにフロントエンドではうまくいきません。 jQueryのコピーが1つだけ必要ですが、別のパッケージにjQueryが必要な場合は、jQueryのコピーがもう1つダウンロードされます。これは主要なNpmの欠点の一つです。

Npmにはpackage.jsonという設定ファイルがあります。このファイルでは、必要な依存関係やライセンスの詳細、説明、名前など、Npmの設定を維持できます。 NpmはDependencies and DevDependenciesを提供します。依存関係はJquery、Angularなどのフロントエンドファイルをダウンロードして維持します。 DevDependenciesはGrunt、Gulp、JSHintなどの開発ツールをダウンロードして保守します。

多くのプロジェクトが両方を使用するのは、フロントエンドパッケージにBowerを使用し、Grunt、Gulp、JSHintなどの開発者ツールにNpmを使用するためです

Grunt

Gruntは、事前定義された繰り返しタスクを実行するためのフロントエンド開発者向けのコマンドラインツールです。一方、タスクは設定オブジェクトで宣言的に定義され、コアパッケージを十分なサイズに保つためにプラグインによって処理されます。 JSファイルの連結と縮小、テストの実行、スクリプトの変更をアップロードするためのブラウザの更新などのようなJavaScriptワークフローを自動化するために使用されます。その利点の1つはそれがプラグインの巨大なエコシステムのために同時に（Gruntプラグインレジストリの6010以上のアイテム）様々なタスクを実行することです。その不利な点は、構成が大きくなり古くなる傾向があるため、複雑になる可能性があることです。