Build tools
Bootstrap に含まれる npm スクリプトを使用して、ドキュメントの作成、ソースコードのコンパイル、テストの実行などを行う方法をご紹介します。
Tooling setup
Bootstrap は npm scripts をビルドシステムとして使っています。package.json には、コードのコンパイル、テスト実行、フレームワークを扱う便利なメソッドが含まれています。
ビルドシステムを使って Web ドキュメントをローカルで実行するには Bootstrap のソースと Node が必要です。以下手順で始めましょう:
- 依存関係を管理するために Node.js をダウンロードしてインストールします。
- Bootstrap のソースコードをダウンロードするか、Bootstrap のリポジトリをフォークします。
/bootstrapディレクトリに移動して、package.json にリストされた依存関係をインストールするためにnpm installを実行します
完了すると、様々なコマンドを実行することができます。
Using npm scripts
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
|
ドキュメントをビルドし、ローカルで閲覧できるようにします。 |
Sass
Bootstrap では、Sass のソースファイルを CSS ファイルにコンパイルするためにDartSassを使用しています（ビルドプロセスに含まれています）。また、独自のアセットパイプラインを使用して Sass をコンパイルしている場合は、同じようにコンパイルすることをお勧めします。以前、Bootstrap v4 では Node Sass を使用していましたが、Node Sass を含む LibSass とその上に構築されたパッケージは現在非推奨となっています。
Autoprefixer
Bootstrap は、ビルド時にいくつかの CSS プロパティにベンダープレフィックスを追加するために Autoprefixer (ビルドシステムに含まれています) を使用しています。それにより、v3 のようなベンダー mixin の必要性を排除しながら CSS の重要なコードを一気に書くことができ、時間とコードを節約しています。
Autoprefixer でサポートされているブラウザのリストは .browserlistrc で管理しています。
RTLCSS
Bootstrap は RTLCSSを用いて CSS を RTL(padding-left などの水平方向のプロパティを反対方向に置き換える) に変換します。これにより CSS を一度書くだけで RTLCSS のcontrolおよびvalueディレクティブを作成できます。
Local documentation
Web ドキュメントをローカルで実行するには Hugo を使う必要があります。Hugo は hugo-bin npm パッケージ経由でインストールできます。以下の手順で開始できます:
- ツールのセットアップ で全ての依存関係をインストールします。
/bootstrapディレクトリに移動してnpm run docs-serveをコマンドラインで実行します。- ブラウザで
http://localhost:9001を開きます。
Hugo の使い方は documentation を参照してください。
Troubleshooting
依存関係のインストールで問題が起きたら、全ての依存関係(グローバルおよびローカル)をアインインストールします。次に npm install を実行します。