ビルドツール
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 を問題なく起動して実行してください。
完了すると、コマンド ラインから提供されるさまざまなコマンドを実行できるようになります。
NPM スクリプトの使用
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 リポジトリ内の別のファイルに保持されています。詳細については、/. browserslistrcを参照してください。
ローカル ドキュメント
ドキュメントをローカルで実行するには、Jekyll を使用する必要があります。Jekyll は、基本的なインクルード、Markdown ベースのファイル、テンプレートなどを提供する非常に柔軟な静的サイト ジェネレーターです。開始方法は次のとおりです。
- 上記のツール設定を実行して、Jekyll (サイト ビルダー) とその他の Ruby 依存関係を .xml でインストールし
bundle install
ます。 - ルート
/bootstrap
ディレクトリからnpm run docs-serve
、コマンド ラインで実行します。 - ブラウザで開い
http://localhost:9001
てください。
Jekyll のドキュメントを読んで、Jekyll の使用方法を学んでください。
トラブルシューティング
依存関係のインストールで問題が発生した場合は、以前のすべての依存関係バージョン (グローバルおよびローカル) をアンインストールします。その後、再実行しnpm install
ます。