メインコンテンツへスキップ

ツールの構築(Build tools) v5.0.0-alpha1設定変更

Bootstrapに含まれるnpmスクリプトを使用してマニュアルを作成したり、ソースコードをコンパイルして、テストを実行する方法などを学習する。

 

ツールのセットアップ(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.1-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からDart Sassに変更

 

Autoprefixer

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

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 を再実行する。