メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

開発に貢献(Contribute) v5.0.0設定変更 v5.1.0ツールの構築から名称変更

ドキュメント構築スクリプトとテストを使用して、Bootstrapの開発を支援してください。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

ツールのセットアップ(Tooling setup)v5.0.0-alpha1ツール変更

Bootstrapは、npm scriptsを使用して、ドキュメントを作成し、ソースファイルをコンパイルできる。package.jsonには、コードのコンパイル、テストの実行などのためのこれらのスクリプトが組み込まれている。これらは、リポジトリやドキュメントの外部での使用を目的としたものではない。

構築システムを使用してドキュメントをローカルで実行するには、BootstrapのソースファイルとNodeのコピーが必要。次の手順に従えばロックする準備が整う:

  1. Bootstrapのソースファイルをダウンロードして解凍し、依存関係の管理に使用するためNode.jsをダウンロードしてインストール(※推奨版の方をインストール)
  2. Bootstrapのソースをダウンロードするか、Bootstrapのリポジトリをフォークしてクローンする。
  3. コマンドライン(ターミナル/コマンドプロンプト)で、解凍したBootstrapのソースファイルがあるルートの /bootstrap ディレクトリに移動し、npm install を実行して、package.jsonにリストされているローカル依存関係をインストール

完了すると、コマンドラインから提供されるさまざまなコマンドが実行できる。

【変更履歴】
  • 【v5.0.0-alpha1】(v4.6.0でバックポート)
    • ドキュメントの構築ツールがJekyllからHugoに変更(それに伴い構築システムでのRubyのインストールも不要に)

npm scriptsを使用(Using npm scripts)v5.0.0-alpha1タスク追加、ツール変更

Bootstrapのpackage.jsonには、プロジェクトを開発するためのたくさんのタスクが組み込まれている。使用している端末内のすべてのnpmスクリプトを見るためには npm run を実行して下さい。主なタスクは次のとおり:

タスク 説明
npm start
v5.0.0-alpha1追加
CSSとJavaScriptをコンパイルしてドキュメントを構築し、ローカルサーバーを起動
npm run dist コンパイルされたファイルで /dist ディレクトリを作成。SassAutoprefixerterserを使用
npm test npm run dist を実行した後、ローカルでテストを実行
npm run docs-serve ローカルでドキュメントを構築し実行

Sassコンパイラ(Sass)v5.0.0-beta2追加

BootstrapはDart Sassを使用してSassソースファイルをCSSファイル(構築プロセスに組み込み済)にコンパイル。独自のアセットパイプラインを使用してSassをコンパイルする場合も、同様にすることを推奨。Bootstrap v4ではNode Sassを使用していたが、LibSassとその上に構築されたNode Sassを含むパッケージは非推奨になったため。

Dart Sassは10のround(角丸)の精度を使用しており、効率上の理由から、この値の調整は許可されておらず、縮小など生成されたCSSのさらなる処理中でこの精度を減らすことはないが、そうすることを選択した場合は、ブラウザのroundの問題を防ぐために、少なくとも6の精度を維持することを推奨。

【変更履歴】
  • 【v5.0.0-beta2】
    • 使用ツールをNode Sass(LibSass)からDart Sassに変更

Autoprefixer

Bootstrapは、Autoprefixer(構築プロセスに組み込まれている)を使用して、構築時にいくつかのCSSプロパティにベンダープレフィックスを自動的に追加。そうすることでCSSの重要な部分を一度に記述できるようになり、v3のようなベンダーのミックスインが必要なくなるので、時間とコードを節約。

Autoprefixerを経由してサポートされているブラウザのリストは、GitHubリポジトリ内の別のファイルに保存されている。詳細は .browserslistrc(browserslistの項目)に記載。

RTLCSS v5.0.0-beta1追加

BootstrapはRTLCSSを使用して、コンパイルされたCSSを処理し、RTL(右書き)に変換。基本的に水平方向を認識するプロパティ(例:padding-left)を反対のプロパティに置き換える。これにより、CSSを1回だけ記述し、RTLCSSのcontrolvalueディレクティブを使用して微調整できる。

ローカルドキュメント(Local documentation)

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

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

Hugoの使用方法の詳細については、Hugoのマニュアル日本語翻訳プロジェクト)に記載。

GitHubにある開発中のソースファイルのドキュメント(解説)をローカルで実行する場合は:
  1. Node.jsをインストール(ツールのセットアップに記載)
  2. "Clone or download"のボタンを押して、DownloadZIPファイルをダウンロードして任意の場所に解凍
  3. コマンドラインで、解凍したファイルの /bootstrap-master ルートディレクトリに移動して、npm install を実行して、Node.jsの依存関係をインストール(node_modules/ 内にファイルが構築される)
  4. npm run dist を実行して、dist/ 内のCSSとJavaScriptファイルを再コンパイル
  5. npm run docs-serve を実行してドキュメントを構築
  6. ブラウザでhttp://localhost:9001を開く

トラブルシューティング(Troubleshooting)

依存関係のインストールで問題が発生したときは、以前のすべての依存関係のバージョン(グローバルやローカル)をアンインストールし、npm install を再実行する。