Build tools

ツールのセットアップ

Bootstrap は npm scripts をビルドシステムとして使っています。package.json には、コードのコンパイル、テスト実行、フレームワークを扱う便利なメソッドが含まれています。

ビルドシステムを使って Web ドキュメントをローカルで実行するには Bootstrap のソースと Node が必要です。以下手順で始めましょう:

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

完了すると、様々なコマンドを実行することができます。

NPM スクリプトの使用

package.json には、開発で用いる様々なタスクを実行するコマンドとタスクが含まれています。それらをターミナルで確認するには、npm run を実行してください。主要なタスクを次のテーブルに示します:

Task	Description
npm start	CSS と JavaScript のコンパイル、ドキュメントのビルドを行い、ローカルサーバを立ち上げます。
npm run dist	コンパイルされたファイルが入った dist/ ディレクトリを作成します。Sass、Autoprefixer、そして terser を使用します。
npm test	npm run dist を実行したあと、ローカルでテストを実行します。
npm run docs-serve	ドキュメントをビルドし、ローカルで閲覧できるようにします。

Autoprefixer

Bootstrap は、ビルド時にいくつかの CSS プロパティにベンダープレフィックスを追加するために Autoprefixer (ビルドシステムに含まれています) を使用しています。それにより、v3 のようなベンダー mixin の必要性を排除しながら CSS の重要なコードを一気に書くことができ、時間とコードを節約しています。

Autoprefixer でサポートされているブラウザのリストは .browserlistrc で管理しています。

RTLCSS

Bootstrap は RTLCSSを用いて CSS を RTL(padding-left などの水平方向のプロパティを反対方向に置き換える) に変換します。これにより CSS を一度書くだけで RTLCSS のコントロールおよび値ディレクティブを作成できます。

ローカル Web ドキュメント

Web ドキュメントをローカルで実行するには Hugo を使う必要があります。Hugo は hugo-bin npm パッケージ経由でインストールできます。以下の手順で開始できます:

1. ツールのセットアップ で全ての依存関係をインストールします。
2. /bootstrap ディレクトリに移動して npm run docs-serve をコマンドラインで実行します。
3. ブラウザで http://localhost:9001 を開きます。

Hugo の使い方は documentation を参照してください。

トラブルシューティング

依存関係のインストールで問題が起きたら、全ての依存関係(グローバルおよびローカル)をアインインストールします。次に npm install を実行します。