ビルドツール
Bootstrap に含まれる npm スクリプトを使用して、ドキュメントの作成、ソース コードのコンパイル、テストの実行などを行う方法を学びます。
ツーリングのセットアップ
Bootstrap は、ビルド システムにnpm スクリプトを使用します。package.jsonには、コードのコンパイル、テストの実行など、フレームワークを操作するための便利なメソッドが含まれています。
ビルド システムを使用してドキュメントをローカルで実行するには、Bootstrap のソース ファイルと Node.js のコピーが必要です。次の手順に従ってください。ロックする準備ができているはずです。
- 依存関係の管理に使用する Node.js をダウンロードしてインストールします。
- Bootstrap のソースをダウンロードするか、 Bootstrap のリポジトリをフォークします。
- ルート
/bootstrapディレクトリに移動して実行し、 package.jsonnpm installにリストされているローカルの依存関係をインストールします。
完了すると、コマンド ラインから提供されるさまざまなコマンドを実行できるようになります。
npm スクリプトの使用
package.jsonには、次のコマンドとタスクが含まれています。
| 仕事 | 説明 |
|---|---|
npm run dist |
npm run dist/dist/コンパイル済みファイルを含むディレクトリを作成します。Sass、Autoprefixer 、およびterserを使用します。 |
npm test |
実行後にローカルでテストを実行しますnpm run dist |
npm run docs-serve |
ドキュメントをローカルでビルドして実行します。 |
実行npm runして、すべての npm スクリプトを表示します。
サス
Bootstrap v4 はNode Sassを使用して、Sass ソース ファイルを CSS ファイルにコンパイルします (ビルド プロセスに含まれます)。独自のアセット パイプラインを使用して Sass をコンパイルするときに同じ CSS を生成するには、少なくとも Node Sass が行う機能をサポートする Sass コンパイラを使用する必要があります。2020 年 10 月 26 日の時点で、LibSass とその上に構築されたパッケージ (Node Sass を含む) は非推奨になっているため、これは重要な注意事項です。
新しい Sass 機能または新しい CSS 標準との互換性が必要な場合は、Dart Sassが Sass の主要な実装となり、Node Sass と完全に互換性のある JavaScript API をサポートします (Dart Sass のGitHub ページにいくつかの例外がリストされています)。
We increase the Sass rounding precision to 6 (by default, it’s 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won’t be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted.
Autoprefixer
Bootstrap uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See .browserslistrc for details.
Local documentation
ドキュメントをローカルで実行するには、 hugo-bin npm パッケージを介してインストールされる Hugo を使用する必要があります。Hugo は、基本的なインクルード、Markdown ベースのファイル、テンプレートなどを提供する、非常に高速で拡張性の高い静的サイト ジェネレーターです。開始方法は次のとおりです。
- 上記のツール設定を実行して、すべての依存関係をインストールします。
- ルート
/bootstrapディレクトリからnpm run docs-serve、コマンド ラインで実行します。 - ブラウザで開い
http://localhost:9001/てください。
Hugo のドキュメントを読んで、Hugo の使用方法について詳しく学んでください。
トラブルシューティング
依存関係のインストールで問題が発生した場合は、以前のすべての依存関係バージョン (グローバルおよびローカル) をアンインストールします。その後、再実行しnpm installます。