開発に貢献(Contribute) v5.0.0設定変更 v5.1.0ツールの構築から名称変更
ドキュメント構築スクリプトとテストを使用して、Bootstrapの開発を支援してください。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
ツールのセットアップ(Tooling setup)v5.0.0-alpha1ツール変更
Bootstrapは、npm scriptsを使用して、ドキュメントを作成し、ソースファイルをコンパイルできる。package.jsonには、コードのコンパイル、テストの実行などのためのこれらのスクリプトが組み込まれている。これらは、リポジトリやドキュメントの外部での使用を目的としたものではない。
構築システムを使用してドキュメントをローカルで実行するには、BootstrapのソースファイルとNodeのコピーが必要。次の手順に従えばロックする準備が整う:
- Bootstrapのソースファイルをダウンロードして解凍し、依存関係の管理に使用するためNode.jsをダウンロードしてインストール(※推奨版の方をインストール)
- Bootstrapのソースをダウンロードするか、Bootstrapのリポジトリをフォークしてクローンする。
- コマンドライン(ターミナル/コマンドプロンプト)で、解凍したBootstrapのソースファイルがあるルートの
/bootstrap
ディレクトリに移動し、npm install
を実行して、package.jsonにリストされているローカル依存関係をインストール
完了すると、コマンドラインから提供されるさまざまなコマンドが実行できる。
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 ディレクトリを作成。SassとAutoprefixerとterserを使用 |
npm test |
npm run dist を実行した後、ローカルでテストを実行 |
npm run docs-serve |
ローカルでドキュメントを構築し実行 |
スタータープロジェクトでnpm経由でBootstrapを始めよう!Sassコンパイラ、Autoprefixer、Stylelintなどが組み込まれたSass & JSサンプルテンプレートリポジトリにアクセスして、自分のnpmプロジェクトでBootstrapの構築やカスタマイズする方法を確認して下さい。他にもBootstrap Examplesリポジトリにテンプレートを掲載。
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のcontrolとvalueディレクティブを使用して微調整できる。
ローカルドキュメント(Local documentation)
ドキュメントをローカルで実行するには、Hugoを使用する必要がある。Hugoは、hugo-bin npmパッケージを経由してインストールされ、基本的な組み込み、Markdownベースのファイル、テンプレートなどを提供し、非常に高速で非常に拡張できる静的サイトジェネレータ。開始方法は次のとおり:
- 上記ツールのセットアップを実行して、すべての依存関係をインストール
- コマンドラインで
/bootstrap
ルートディレクトリからnpm run docs-serve
を実行 - ブラウザでhttp://localhost:9001を開く
Hugoの使用方法の詳細については、Hugoのマニュアル(日本語翻訳プロジェクト)に記載。
※GitHubにある開発中のソースファイルのドキュメント(解説)をローカルで実行する場合は:- Node.jsをインストール(ツールのセットアップに記載)
- "Clone or download"のボタンを押して、DownloadZIPファイルをダウンロードして任意の場所に解凍
- コマンドラインで、解凍したファイルの
/bootstrap-master
ルートディレクトリに移動して、npm install
を実行して、Node.jsの依存関係をインストール(node_modules/
内にファイルが構築される) npm run dist
を実行して、dist/
内のCSSとJavaScriptファイルを再コンパイルnpm run docs-serve
を実行してドキュメントを構築- ブラウザでhttp://localhost:9001を開く
トラブルシューティング(Troubleshooting)
依存関係のインストールで問題が発生したときは、以前のすべての依存関係のバージョン(グローバルやローカル)をアンインストールし、npm install
を再実行する。
ページ移動
ページがありません