コントリビュート
ドキュメントのビルドスクリプトとテストを使用して、Bootstrapの開発にご協力ください。
ツールのセットアップ
Bootstrapは、npmスクリプトを使用してドキュメントをビルドし、ソースファイルをコンパイルします。 package.jsonには、コードのコンパイル、テストの実行などを行うためのスクリプトが格納されています。これらは、リポジトリとドキュメント以外での使用を意図したものではありません。
ビルドシステムを使用してドキュメントをローカルで実行するには、BootstrapのソースファイルとNodeが必要です。以下の手順に従えば、準備完了です。
- 依存関係の管理に使用するNode.jsをダウンロードしてインストールします。
- Bootstrapのソースをダウンロードするか、Bootstrapのリポジトリをフォークしてクローンします。
- ルートディレクトリ` /bootstrap`に移動し、 `npm install`を実行して、package.jsonにリストされているローカルの依存関係をインストールします。
完了すると、コマンドラインから提供されるさまざまなコマンドを実行できるようになります。
npmスクリプトの使用
package.jsonには、プロジェクトを開発するための多数のタスクが含まれています。ターミナルですべてのnpmスクリプトを表示するには、`npm run`を実行します。 **主なタスクは次のとおりです。**
タスク | 説明 |
---|---|
npm start |
CSSとJavaScriptをコンパイルし、ドキュメントをビルドし、ローカルサーバーを起動します。 |
npm run dist |
コンパイルされたファイルを含む`dist/`ディレクトリを作成します。 Sass、Autoprefixer、terserを使用します。 |
npm test |
`npm run dist`を実行した後に、ローカルでテストを実行します。 |
npm run docs-serve |
ドキュメントをローカルでビルドして実行します。 |
Sass
Bootstrapは、SassソースファイルをCSSファイルにコンパイルするためにDart Sassを使用しています(ビルドプロセスに含まれています)。独自の asset pipeline を使用してSassをコンパイルする場合は、同じことを行うことをお勧めします。以前はBootstrap v4にNode Sassを使用していましたが、LibSassとそれに基づいて構築されたパッケージ(Node Sassを含む)は非推奨になりました。
Dart Sassは、丸め精度10を使用し、効率上の理由からこの値の調整を許可していません。生成されたCSSのさらなる処理(縮小など)中にこの精度を下げることはありませんが、そうする場合は、ブラウザの丸め問題を防ぐために、少なくとも精度6を維持することをお勧めします.
Autoprefixer
Bootstrapは、Autoprefixer(ビルドプロセスに含まれています)を使用して、ビルド時に一部のCSSプロパティにベンダープレフィックスを自動的に追加します。そうすることで、CSSの重要な部分を一度だけ記述できるようになり、v3で見られるようなベンダーmixinが不要になるため、時間とコードを節約できます。
Autoprefixerでサポートされているブラウザのリストは、GitHubリポジトリ内の別のファイルで管理しています。詳細は、.browserslistrcを参照してください。
RTLCSS
Bootstrapは、RTLCSSを使用して、コンパイルされたCSSを処理し、RTLに変換します。基本的に、水平方向を認識するプロパティ(例: `padding-left`)を反対のプロパティに置き換えます。RTLCSSの制御ディレクティブと値ディレクティブを使用して、CSSを一度だけ記述し、マイナーな調整を行うことができます。
ローカルドキュメント
ドキュメントをローカルで実行するには、hugo-bin npmパッケージを介してインストールされるHugoを使用する必要があります。Hugoは非常に高速で拡張性の高い静的サイトジェネレータであり、基本的なインクルード、Markdownベースのファイル、テンプレートなどを提供します。起動方法は次のとおりです。
- 上記のツールのセットアップを実行して、すべての依存関係をインストールします。
- ルートディレクトリ `/bootstrap`から、コマンドラインで`npm run docs-serve`を実行します。
- ブラウザで`http://localhost:9001/`を開きます。
Hugoの使用方法の詳細については、ドキュメントを読んでください。
トラブルシューティング
依存関係のインストールで問題が発生した場合は、以前のすべての依存関係バージョン(グローバルとローカル)をアンインストールします。次に、`npm install`を再実行します。