ビルドツール

Bootstrapに含まれるnpmスクリプトを使用して、ドキュメントのビルド、ソースコードのコンパイル、テストの実行などを行う方法を学びましょう。

ツール設定

Bootstrapは、ビルドシステムにnpmスクリプトを使用しています。package.jsonには、コードのコンパイル、テストの実行など、フレームワークを操作するための便利なメソッドが含まれています。

ビルドシステムを使用し、ドキュメントをローカルで実行するには、BootstrapのソースファイルとNodeのコピーが必要です。以下の手順に従えば、準備が整います。

1. Node.jsをダウンロードしてインストールします。これは依存関係を管理するために使用します。
2. Bootstrapのソースをダウンロードするか、Bootstrapのリポジトリをフォークします。
3. ルートの/bootstrapディレクトリに移動し、npm installを実行して、package.jsonにリストされているローカルの依存関係をインストールします。

完了したら、コマンドラインから提供されるさまざまなコマンドを実行できるようになります。

npmスクリプトの使用

package.jsonには、以下のコマンドとタスクが含まれています。

npm runを実行して、すべてのnpmスクリプトを確認してください。

Sass

Bootstrap v4では、SassソースファイルをCSSファイルにコンパイルするためにNode Sassを使用しています（ビルドプロセスに含まれています）。独自の資産パイプラインを使用してSassをコンパイルするときに、同じ生成されたCSSを使用するには、Node Sassがサポートする少なくとも機能をサポートするSassコンパイラーを使用する必要があります。これは、2020年10月26日現在、LibSassと、その上に構築されたパッケージ（Node Sassを含む）が非推奨になっているため、注意が必要です。

より新しいSass機能や、より新しいCSS標準との互換性が必要な場合は、Dart SassがSassの主要な実装となり、Node Sassと完全に互換性のあるJavaScript APIをサポートしています（Dart SassのGitHubページに記載されているいくつかの例外があります）。

ブラウザの丸め処理の問題を防ぐために、Sassの丸め精度を6に上げています（Node Sassではデフォルトで5です）。Dart Sassを使用する場合は、この調整は必要ありません。そのコンパイラは丸め精度10を使用しており、効率上の理由から調整できません。

Autoprefixer

Bootstrapは、ビルド時にいくつかのCSSプロパティにベンダープレフィックスを自動的に追加するために、Autoprefixer（ビルドプロセスに含まれています）を使用しています。これにより、CSSの主要部分を1回だけ記述できるため、v3にあったようなベンダーmixinの必要性を排除し、時間とコードを節約できます。

GitHubリポジトリ内の別のファイルで、Autoprefixerを介してサポートされるブラウザのリストを維持しています。詳細については、.browserslistrcを参照してください。

ローカルドキュメント

ローカルでドキュメントを実行するには、hugo-bin npmパッケージを介してインストールされるHugoを使用する必要があります。Hugoは高速で拡張性の高い静的サイトジェネレーターであり、基本的なインクルード、Markdownベースのファイル、テンプレートなどを提供します。開始方法は次のとおりです。

1. 上記のツール設定を実行して、すべての依存関係をインストールします。
2. ルートの/bootstrapディレクトリから、コマンドラインでnpm run docs-serveを実行します。
3. ブラウザでhttp://localhost:9001/を開くと、完了です。

Hugoの使用について詳しくは、ドキュメントをご覧ください。

トラブルシューティング

依存関係のインストールで問題が発生した場合は、以前のすべての依存関係のバージョン（グローバルおよびローカル）をアンインストールしてください。次に、npm installを再実行します。