ツール設定
Bootstrapは、ドキュメントの構築とソースファイルのコンパイルにnpm scriptsを使用しています。私たちのpackage.jsonには、コードのコンパイルやテストの実行などのためのこれらのスクリプトがあります。これらは、私たちのリポジトリとドキュメントの外での使用は意図されていません。
ビルドシステムを使用し、ローカルでドキュメントを実行するには、BootstrapのソースファイルのコピーとNodeが必要です。以下のステップに従えば、ロックする準備が整うはずです：
- 依存関係を管理するために使用するNode.jsをダウンロード・インストールします。
- Bootstrapのソースをダウンロードするか、Bootstrapのリポジトリをフォークしてクローンしてください。
- ルートの
/bootstrapディレクトリに移動し、npm installを実行してpackage.jsonに記載されているローカル依存関係をインストールします。
完成すると、提供された各種コマンドをコマンドラインから実行することができるようになります。
npmスクリプトを使用する
私たちのpackage.jsonには、プロジェクトを開発するための多数のタスクが含まれています。npm runを実行すると、ターミナルにすべてのnpmスクリプトが表示されます。主なタスクは以下の通りです：
| Task | Description |
|---|---|
npm start |
CSSとJavaScriptのコンパイル、ドキュメントのビルド、ローカルサーバーの起動を行います。 |
npm run dist |
コンパイルしたファイルで dist/ディレクトリを作成します。Sass、Autoprefixer、terserを使用します。 |
npm test |
npm run distを実行した後、ローカルでテストを実行します。 |
npm run docs-serve |
ドキュメントをローカルにビルドして実行します。 |
Sass
Bootstrapでは、SassのソースファイルをCSSファイルにコンパイルするためにDart Sassを使用しています（ビルドプロセスに含まれています）。独自のアセットパイプラインを使用してSassをコンパイルする場合は、同じことをすることをお勧めします。以前、Bootstrap v4のためにNode Sassを使用しましたが、Node Sassを含むLibSassとその上に構築されたパッケージは現在非推奨となっています。
Dart Sassでは丸め精度を10としており、効率的な理由からこの値を調整することはできません。最小化など、生成されたCSSをさらに処理する際にこの精度を下げることはありませんが、もしそうするのであれば、ブラウザの丸めに関する問題を防ぐために、少なくとも6以上の精度を維持することをお勧めします。
Autoprefixer
Bootstrapでは、Autoprefixer(ビルドプロセスに含まれています)を使用して、ビルド時に一部のCSSプロパティにベンダープレフィックスを自動的に追加しています。これにより、CSSの重要な部分を一度に記述することができ、v3にあるようなベンダーMixinsの必要性がなくなるため、時間とコードの節約になります。
Autoprefixerでサポートされているブラウザのリストは、GitHubリポジトリ内の別ファイルで管理しています。詳しくは.browserslistrcをご覧ください。
RTLCSS
Bootstrapは、RTLCSSを使って、コンパイルされたCSSを処理し、RTLに変換します。基本的には、水平方向を意識したプロパティ（例：padding-left）とその反対とを置き換えます。これにより、CSSを一度だけ記述し、RTLCSSのcontrolとvalueディレクティブを使って微調整をすることができます。
ローカルドキュメント
ローカルでドキュメントを実行するには、Hugoを使用する必要があります。Hugoは、hugo-bin npmパッケージでインストールします。Hugoは非常に高速で拡張性の高い静的サイトジェネレータで、基本的なインクルード、Markdownベースのファイル、テンプレートなどを提供します。ここでは、Hugoを始める方法を説明します：
- 上記のツール設定を実行し、すべての依存関係をインストールします。
- ルートの
/bootstrapディレクトリから、コマンドラインでnpm run docs-serveを実行します。 - ブラウザで
http://localhost:9001/を開いてみると、出来上がり。
Hugoの使い方については、そのドキュメントを読んでください。
トラブル対応
依存関係のインストールで問題が発生した場合は、以前の依存関係のバージョン（グローバルとローカル）をすべてアンインストールしてください。その後、npm installを再実行します。