ビルドツール
Bootstrap に含まれる npm スクリプトを使用して、ドキュメントの作成、ソース コードのコンパイル、テストの実行などを行う方法を学びます。
Bootstrap は、ビルド システムにNPM スクリプトを使用します。package.jsonには、コードのコンパイル、テストの実行など、フレームワークを操作するための便利なメソッドが含まれています。
ビルド システムを使用してドキュメントをローカルで実行するには、Bootstrap のソース ファイルと Node.js のコピーが必要です。次の手順に従ってください。ロックする準備ができているはずです。
- 依存関係の管理に使用する Node.js をダウンロードしてインストールします。
- ルート
/bootstrapディレクトリに移動して実行し、 package.jsonnpm installにリストされているローカルの依存関係をインストールします。 - Rubyをインストールし、 Bundlerをでインストールして
gem install bundler、最後に を実行しbundle installます。これにより、Jekyll やプラグインなど、すべての Ruby 依存関係がインストールされます。- Windows ユーザー:このガイドを読んで、Jekyll を問題なく起動して実行してください。
完了すると、コマンド ラインから提供されるさまざまなコマンドを実行できるようになります。
package.jsonには、次のコマンドとタスクが含まれています。
| 仕事 | 説明 |
|---|---|
npm run dist |
npm run dist/distコンパイル済みファイルを含むディレクトリを作成します。Sass、Autoprefixer 、およびUglifyJSを使用します。 |
npm test |
プラスと同じで、npm run distローカルでテストを実行します |
npm run docs |
ドキュメント用の CSS と JavaScript をビルドしてリントします。その後、 を介してドキュメントをローカルで実行できますnpm run docs-serve。 |
実行npm runして、すべての npm スクリプトを表示します。
Bootstrap はAutoprefixer (ビルド プロセスに含まれています) を使用して、ビルド時に一部の CSS プロパティにベンダー プレフィックスを自動的に追加します。そうすることで、v3 に見られるようなベンダー mixin の必要性を排除しながら、CSS の主要部分を一度に記述できるようになるため、時間とコードを節約できます。
Autoprefixer でサポートされているブラウザーのリストは、GitHub リポジトリ内の別のファイルに保持されています。詳細については、 /package.jsonを参照してください。
ドキュメントをローカルで実行するには、Jekyll を使用する必要があります。Jekyll は、基本的なインクルード、Markdown ベースのファイル、テンプレートなどを提供する非常に柔軟な静的サイト ジェネレーターです。開始方法は次のとおりです。
- 上記のツール設定を実行して、Jekyll (サイト ビルダー) とその他の Ruby 依存関係を .xml でインストールし
bundle installます。 - ルート
/bootstrapディレクトリからnpm run docs-serve、コマンド ラインで実行します。 - ブラウザで開い
http://localhost:9001てください。
Jekyll のドキュメントを読んで、Jekyll の使用方法を学んでください。
依存関係のインストールで問題が発生した場合は、以前のすべての依存関係バージョン (グローバルおよびローカル) をアンインストールします。その後、再実行しnpm installます。