Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

ビルドツール

Bootstrap に含まれている npm スクリプトを使ってドキュメントを作成し、ソースをコンパイル、テストする方法などを学びましょう。

目次

ツールのセットアップ

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

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

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

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

Using npm scripts

NPM スクリプトの使用

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

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

Autoprefixer

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

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

ローカル Web ドキュメント

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

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

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

トラブルシューティング

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