34

私はバックエンド開発者であり、npm、bower、gulp、grunt、および Yeoman に少し混乱しています。誰かにその目的は何かと尋ねると、答えは依存関係マネージャーに要約される傾向があります。確かに、すべて同じことを行う 4 つの異なるツールは必要ありませんか?

誰かがこれらのそれぞれが何に役立つのかをできるだけ短い文で説明してもらえますか? 可能であればツールごとに 1 つだけで、5 歳の (開発スキルを持つ) が理解できる言葉を使用してください。

例えば:

  • SVNは、ソース コードの変更を保存、管理、および追跡します

私は過去にmaven、Jenkins、nexus、antを使用しました。上記のツールをこれらと比較できますか?

また、他のフロントエンド ツールを自由にリストに追加してください。

これが私がこれまでに発見したことです-ただし、それが正しいかどうかはわかりません:

  • フロントエンド開発/JS ライブラリ用のbower依存関係マネージャー。フラットな依存関係リストを使用します。
  • node.js サーバーのnpm依存関係マネージャーは、推移的な依存関係/依存関係ツリーを解決できます
  • gruntは、Jenkins によく似たタスクを実行しますが、コマンド ラインでのローカリティ
  • Yeomanが提供した足場、つまりスケルトン プロジェクト
  • gulp grunt と同じですが、js のみで記述されています
  • jsアプリ用のnode.jsサーバー?
  • git分散型 SCM/VCS、svn/cvs に対応

私は近いですか?:)

4

4 に答える 4

47

あなたは近いです!JavaScript へようこそ :)

簡単な説明と、ほとんどの開発者が時間を費やす 1 つの機能を紹介しましょう。

bower ブラウザで使用されるパッケージに焦点を当てています。それぞれbower install <packagename>が含まれる 1 つのファイルを正確に指します (さらに多くをダウンロードできます)。webpack、browserify、babel の成功により、ファースト クラスの依存関係マネージャーとしてはほとんど時代遅れになっています。

2018 更新: NPM を支持して、bower はほとんど廃止されました

npm は歴史的に NodeJS コードに焦点を当てていましたが、ブラウザー モジュールの bower を打倒しました。誰にもだまされてはいけません。NPM は巨大です。また、NPM は多くのファイルをプロジェクトにロードします。新しい npm をインストールすることは、常に新しいコーヒーを淹れる十分な理由になります。NPM は使いやすいですが、バージョンを参照する方法が緩く、モジュールの公開が恣意的であるため、環境を変更するとアプリが壊れる可能性があります。研究シュリンクラップnpm install --save-exact

2018 更新: NPM は成長しました! 安全性と再現性に関する多くの改善が実装されています。

grunt タスクの自動化を容易にします。年上でやや鈍い兄弟を飲み込みます。JavaScript コミュニティは、2014 年に彼と頻繁に交流していました。Grunt はすでにいくつかの場所でレガシーと見なされていますが、非常に強力な自動化がまだまだたくさんあります。大規模なユースケースでは、構成は悪夢になる可能性があります。ただし、そのための grunt モジュールがあります。

2018 年更新: grunt はほとんど廃止されました。書きやすい webpack 構成はそれを殺しました。

gulp grunt と同じことを行いますが、より高速です。

npm run-script タスクランナーはまったく必要ないかもしれません。NodeJS スクリプトは非常に簡単に作成できるため、ほとんどのユースケースでカスタマイズされたタスク自動化ワークフローが可能になります。npm run-scriptを使用して、package.json ファイルのコンテキストからスクリプトを実行します

webpack webpack をお見逃しなく。特に、JavaScript を一貫性のあるモジュラー コードに記述するさまざまな方法に迷っている場合はなおさらです。Webpack は .js ファイルをモジュールにパッケージ化し、それを見事に行います。Webpack は非常に拡張性が高く、優れた開発環境も 提供ます

ヨーマン 足場。プロジェクトのアーキテクチャに制御可能な共通基盤を提供するため、バックグラウンドが異なるチームにとって非常に価値があります。足場用の足場まであります。

于 2016-04-22T09:06:02.290 に答える
7

それで、それぞれが何であるかをよく知っているので、簡単なワークフローを示します。

  1. 私はヨーマンを使って基本的な骨格を足場にしています。
  2. アプリケーションのランタイムとしてnodeを使用しています。すなわち。走るnode appname
  3. npmを使用してノード モジュールをインストールし、ノードでアプリケーションを作成できるようにします
  4. フロントエンド ライブラリのようなbowerのコンポーネントが必要になる場合があるため、bower を使用してこれらをフェッチします。
  5. ここで、反復的なタスクを実行するために、grunt または gulp を使用していくつかのタスクを記述します。したがって、繰り返したいときはいつでも、jsファイルを最小化して、 grunt/ gulpを呼び出して実行させます。違いを尋ねると、Gulp はストリーム ベースであり、grunt はタスク ベースです。
  6. 変更を追跡するためにgitを使用してバージョン管理を行っています
于 2016-04-22T08:51:49.737 に答える
1

詳細を追加しました:

npmは javascript のパッケージ マネージャー、npm は nodejs のパッケージ エコシステムですが、フロントエンド プロジェクトにのみ使用できます。

gruntgulpは、縮小、コンパイル、コマンド ラインでの単体テストなどのタスクを分離して自動化するのに役立ちます。プロセスは分離された (通常は軽量の) コマンド ライン/プロセスにすぎないため、(たとえば) Visual Studio よりも軽量なソリューションです。

gulpgruntbowerの違いについては、すでにチケットがあります: Grunt、Gulp.js、および Bower の違いは何ですか? それらを使用する理由と時期

Nodejs はより JavaScriptランタイムです。Node.js を使用すると、js と、さまざまなコア機能やその他のコア機能を処理する「モジュール」のコレクションを使用して、Web サーバーとネットワーク ツールを作成できます。ソース

このチケットでは、Git と Subversion の違いについて説明します:なぜ Git は Subversion よりも優れているのですか?

于 2016-04-22T09:04:22.973 に答える
1
  1. Gulp vs Grunt: Gulp は、タスクの自動化により柔軟性を提供します。Grunt には、一般的な開発プラクティスに従って多くの機能が組み込まれています。Grunt と Gulp には主に 2 つの違いがあります。

    • Grunt は構成に重点を置き、Gulp はコードに重点を置いています
    • Grunt は組み込みの一般的に使用される一連のタスクを中心に構築されましたが、Gulp は何も強制しないというアイデアで生まれましたが、コミュニティによって開発されたマイクロタスクが互いにどのように接続されるべきかについてはこちらをお読みください

  1. NodeJS: ノンブロッキングのサーバー側スクリプト言語です。つまり、現在の操作が終了するまで、操作はそれ以上の実行をブロックしません。

  1. Git: おっしゃる通り、広く使われている SCM ツールです。GitHub のドキュメントによると、データが削除されないため、他の SCM ツールとは異なります。

    Git は、そのデータをミニ ファイルシステムの一連のスナップショットのように考えています。Git でプロジェクトの状態をコミットまたは保存するたびに、基本的にその時点ですべてのファイルがどのように見えるかを撮影し、そのスナップショットへの参照を保存します。

    Git でアクションを実行すると、ほとんどすべてのアクションが Git データベースにデータを追加するだけです。システムに元に戻すことができないことを実行させたり、何らかの方法でデータを消去させたりすることは非常に困難です。他の VCS と同様に、まだコミットしていない変更を失ったり台無しにしたりする可能性があります。ただし、スナップショットを Git にコミットした後は、特にデータベースを定期的に別のリポジトリにプッシュする場合は、スナップショットを失うことは非常に困難です。

    続きを読む


  1. Bower と NPM : Bower と NPM は依存関係マネージャーですが、Bower モジュールはフロントエンド開発用です。NPM は、NodeJS バックエンドで使用されるモジュールの膨大なコレクションです。このSOの回答はそれをよりよくカバーしています
于 2016-04-22T08:52:54.223 に答える