この記事では、私はされたようなツールチェーン大手の面倒開発するフロントエンド理由を把握しようと、このテーマに関する国の地域社会の記事でやっての過程でノートが少し透明話しているようだ（私は見つけられませんでした）、そして最終的には二つの大きな記事がオンラインに顔を出した、私は読書をお勧めします：
- 現代のJavaScriptは恐竜についての説明、[... NPM、モジュールパッケージ、バベル、] htmlファイルの参照JSファイル、ステップの説明によってステップを使用する理由の必要性をはるか：身近な形で始まります
- NPM対バウアー対Browserify対ガルプ対兵卒対WebPACKの不足、自分の役割を比較し、様々なツールを比較します。（圧倒的に答え、次のスタックオーバーフローの問題は、良い来ました）
まず、定義：
ビルドツール：繰り返しの機械的なことをやってに慣れていないしてみましょう、私たちの手の解放。
そこに物事のどのような機械的な繰り返し？
以前のフロントエンド開発（JS + CSS + HTML）で、私たちの多くは、のような非常に不快な場所を、感じがあります。
- JS弱いタイプ
- のCSSのプログラミング
- 手動メンテナンスは、多くのトラブルに依存します
- リソース要求は、より速く必要です
- いいえ熱いアップデートありません
- ブラウザの互換性
......
これらのニーズは、次のようなフロントエンドツールの数を出産した
TS / SCSS / JSMin / ...
次のタスクを実行するには：
- コードチェック
- ユニットテストなどを実行します
- コンパイラ
- 依存関係の分析、包装、交換など
- コード圧縮、精神の画像圧縮
- バージョン管理
...
さらに、入力を実行するコマンドラインは比較的トラブルのある
ベースのマシンではなく、私たちは、これらのアイデアを実行するために手を操作でき、これらの努力の統合のビルドツールが登場しました
最初は、パッケージマネージャであります
パッケージマネージャ
ノードが浮上していると
頻繁に使用されるサードパーティ製のライブラリを維持し、パッケージマネージャが存在しない状態でパッケージやマニュアル管理をダウンロードするには、公式ウェブサイトに依存する必要があります。
パッケージマネージャパッケージ簡素化プロジェクトの依存関係とアップデートをインストールするには、手動でサードパーティ製の保守パッケージとその依存関係をダウンロードする必要はありません。
このカテゴリのツールは、NPM /バウアー/糸を持っています
JavaScriptのモジュールバンドラ
//index.js
var moment = require（'moment'）;
moment.func()
ノードは、コンピュータのファイルシステムにアクセスすることができますので、そのようなコードノードは、問題ではありません。各ノードは、NPMモジュールパスの場所を知っていないので、何の書き込みrequire('./node_modules/moment/min/moment.min.js)だけ、require('moment')
問題は、必要と識別できないブラウザ、必要とされるモジュールのパッケージャを
入り口のモジュールファイルからネクタイ、任意の文を必要とし、適切なコードに置き換えると、最終的には単一の出力ファイルを作成して見つけます。HTMLで出力ファイルにこの最後の参照。そして、圧縮されたファイルにパッケージに依存し、ある程度の過度のHTTP接続の問題を解決することができます
このようなツールは、Browserify webpack
タスクランナー
私たちは、自動的にすべてのタスクではなく、そのようなSCSS、圧縮されたコード、糸くずをコンパイルすると、手動で複数行のコードを実行するコマンドの実行を自動化することができます実行したいと思います...
使用のlinuxへのようないくつかの
&&一連のタスクを実行します。
このようなツールは、 grunt/gulp/npm
grunt/gulp：最大の違いは、ということであるgrunt各タスクは、ファイルを読み書きする必要があります。そしてGulpノードストリームに基づいて、プラグインプロセスフローの一連のと併せて、フローインサートの間を通過することができます。
npm内蔵のスクリプト機能、他のコマンドラインツールを呼び出すことにより、タスクを実行します。一緒のWebPACKとNPM webpack-dev-server eslint-loaderのように、かつ効率的で便利な仕様のフロントエンドの開発という。
足場
最初のプロジェクトを作成し、上記の構成のシリーズを作るために使用されます。
フレームワークは、CLI、ヨーマン様々なツールを提供しています
概要
一気、イサキ、browserify、WebPACKの、ロールアップなどのビルドツールは、CSSにコンパイルSASS、画像圧縮機能と統合...などのプラグインの形でオンになっています。資源を加工、包装より多くのモジュール上の（画像、JSファイル、CSSファイルなど）を焦点WebPACKのは、本番環境の展開に合わせてフロントエンドリソースにパッケージ化。一気、作男は、フロントエンドの開発プロセスを調整するように設計されています。シナリオはJSライブラリをパックされた場合、ESは、変換をしたい、解析するモジュールを使用することができますロールアップ比べWebPACKのは、より簡潔になります。