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

私はnpmとbowerを初めて使用し、emberjsで最初のアプリを作成します:)。
Railsについては少し経験があるので、依存関係をリストするためのファイル（Bundler Gemfileなど）の考え方に精通しています。

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

私が収集したものから、
実行bower installするとパッケージがフェッチされて/vendorディレクトリに配置され、
実行npm installするとパッケージがフェッチされて/node_modulesディレクトリに配置されます。

このSOの答えは、bowerがフロントエンド用で、npmがバックエンド用のものであることを示しています。
Ember-app-kitは一見するとこの違いに準拠しているようです...しかし、一部の機能を有効にするためのgruntfileの指示には2つの明示的なコマンドが含まれているため、ここでは完全に混乱しています。

直感的に私はそれを推測します

1. npm install --save-dev package-nameは、package-jをpackage.jsonに追加することと同じです。

2. 亭--saveパッケージ名はインストール私にパッケージを追加するのと同じかもしれないbower.jsonとランニング亭がインストール？

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

2016年半ばの更新：

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

初心者は、ビルドツールとワークフローの選択にすぐに夢中になってしまう可能性がありますが、2016年の最新情報は、Bower、Grunt、Gulpをまったく使用していません。Webpackを使用すると、NPMですべてを直接実行できます。

• Googleの「npm as build tool」の結果：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ます（つまり、依存関係にエントリを追加して、package.jsonを更新して保存します）

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

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

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

これをさらに混乱させる事実は、npmが、gruntおよびなどのフロントエンド開発でも使用できるいくつかのパッケージを提供することjshintです。

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

Bowerは、npmとは異なり、メインファイルと見なされる複数のファイル（.js、.css、.html、.png、.ttfなど）を持つことができます。Bowerは、これらの主要なファイルを一緒にパッケージ化すると、コンポーネントと意味的に見なします。

編集：GruntはNpmやBowerとはかなり異なります。Gruntは、JavaScriptタスクランナーツールです。それ以外の場合は手動で行わなければならなかったgruntを使用して多くのことを行うことができます。Gruntの使用法のいくつかを強調します。

1. 一部のファイルの圧縮（例：zipupプラグイン）
2. jsファイルのリンティング（jshint）
3. より少ないファイルのコンパイル（grunt-contrib-less）

sassコンパイル、javascriptの醜悪化、ファイル/フォルダーのコピー、javascriptの縮小などのためのイヤなプラグインがあります。

gruntプラグインもnpmパッケージであることに注意してください。

質問1

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

このパッケージがどこに属しているかによります。ノードモジュール（grunt、requestなど）の場合は、package.jsonに格納され、そうでない場合はbower jsonに格納されます。

質問2

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

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

• package.jsonファイルを編集し、「リクエスト」への依存関係を追加します
• npmインストール

または

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

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

どちらの方法でもこれを行うことができ、大きな違いはありません。