ビルドツール

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

ツールのセットアップ

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

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

  1. 依存関係を管理するために Node.js をダウンロードしてインストール
  2. /bootstrap ディレクトリに移動して, package.json にリストされた依存関係をインストールするために npm install を実行。
  3. Ruby をインストール, Bundlergem install bundler でインストール, そして最後に bundle install を実行。これで Jekyll やプラグインなどの Ruby の依存関係が全てインスールされる。
    • Windows ユーザ: this guide を読んで Jekyll を起動してください。

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

NPM スクリプトの使用

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

Task Description
npm run dist コンパイルされたファイルが入った /dist ディレクトリを作成 Sass, Autoprefixer, UglifyJS を使用
npm test npm run dist と同じだが, ローカルでテスト実行
npm run docs Web ドキュメントのための CSS と JavaScript を生成しチェック, npm run docs-serve を実行すると Web ドキュメントをローカルで参照可能

npm run を実行するとすべての npm スクリプトが表示されます。

Autoprefixer

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

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

ローカル Web ドキュメント

Web ドキュメントをローカルで実行するには Jekyll を使う必要があります。以下の手順で開始できます:

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

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

トラブルシューティング

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