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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ツールの構築(Build tools)

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

 

ツールのセットアップ(Tooling setup)v4.5.0サポート対象の変更

Bootstrapは、構築システムにnpm scriptsを使用。package.jsonには、コードのコンパイル、テストの実行など、フレームワークを扱う便利なメソッドが組み込まれている。

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

  1. Bootstrapのソースファイルをダウンロードして解凍し、依存関係の管理に使用するためNode.jsをダウンロードしてインストール(※推奨版の方をインストール、v4.5.0~:Node.js10以上に対応
  2. コマンドライン(ターミナル/コマンドプロンプト)で、解凍したBootstrapのソースファイルがあるルートの /bootstrap ディレクトリに移動し、npm install を実行して、package.jsonにリストされているローカル依存関係をインストール
  3. Rubyをインストールし(v4.5.0~:Ruby2.6以上に対応)、再びコマンドラインで gem install bundler を実行してBundlerをインストールし、最後に bundle install を実行。これによりJekyllやプラグインなど、すべてのRubyの依存関係がインストールされる
    • Windowsユーザーの場合こちらのガイド(英語)を読んで、問題なくJekyllを起動して実行すること(にざっくり記載
    • RubyInstallerによる方法(上記の1,2の後に続いて)
      1. RubyInstaller for WindowsからRuby+Devkit 2.X.X (x64) のInstaller版(v4.5.0~:Ruby2.6以上に対応)をダウンロードしてインストール
      2. インストールが完了すると自動的にMSYS2のコマンドインストール画面が起動するので、そのまま[Enter]を押すと自動的に1,2,3の順に実行される
        ※MSYS2を更新する場合は、コマンドプロンプトで /bootstrap ルートディレクトリから ridk install を実行するとMSYS2のコマンドインストール画面が起動するので、そのまま[Enter]を押す
      3. コマンドプロンプトで /bootstrap ルートディレクトリから gem install jekyll bundler を実行
      4. 最後に bundle install を実行

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

【変更履歴】

  • 【v4.5.0】
    • セットアップツールはNode.js10以上、Ruby2.6以上を推奨(特にNode.js10未満はサポート外に)

【Bootstrap3.xとの変更箇所】

  • 構築システム:Gruntnpm scripts

 

npm scriptsを使用(Using npm scripts)v4.5.0ツール変更

package.jsonには、次のコマンドとタスクが組み込まれている:

タスク 説明
npm run dist npm run dist は、コンパイルされたファイルとともに /dist ディレクトリを作成。SassAutoprefixerterserを使用
npm test npm run dist と同じだが、ローカルでテストを実行
npm run docs ドキュメント用のCSS、JavaScriptを構築してlintでチェック。その後 npm run docs-serve 経由でドキュメントをローカルで実行

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

【変更履歴】

  • 【v4.5.0】
    • JavaScriptのminifierツールがUglifyJSからterserに変更(UglifyJSがES6+に非対応のためと思われる)

 

Autoprefixer v4.2.1ファイル変更

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

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

【変更履歴】

  • 【v4.2.1】
    • サポート記載ファイル:package.json.browserslistrc

【Bootstrap3.xとの変更箇所】

  • v3.2.0で廃止されたVendor prefix mixinは削除
  • サポート記載ファイル:/build/postcss.config.jspackage.json【v4.0.0】 ⇒ .browserslistrc【v4.2.1】

 

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

ドキュメントをローカルで実行するには、基本的な組み込み、Markdownベースのファイル、テンプレートなどを提供するかなり柔軟な静的サイトジェネレータであるJekyllを使用する必要がある。開始方法は次のとおり:

  1. 上記ツールのセットアップをした後、bundle install を実行し、Jekyll(サイト構築)と他のRubyの依存関係をインストール
  2. コマンドラインで /bootstrap ルートディレクトリから npm run docs-serve を実行
  3. ブラウザでhttp://localhost:9001を開く

Jekyllの使用方法の詳細については、Jekyllのマニュアル(英語)に記載。

GitHubにある開発中のソースファイルのドキュメント(解説)をローカルで実行する場合は:

  1. Node.js、Ruby、Bundlerをインストール(ツールのセットアップを参照)
  2. "Clone or download"のボタンを押して、DownloadZIPファイルをダウンロードして任意の場所に解凍
  3. コマンドラインで、解凍したファイルの /bootstrap-4-dev ルートディレクトリに移動して、bundle install を実行し、Jekyllと他のRubyの依存関係をインストール
  4. npm install を実行して、Node.jsの依存関係をインストール(node_modules/ 内にファイルが構築される)
  5. npm run dist を実行して、dist/ 内のCSSおよびJavaScriptファイルを再構築
  6. npm run docs-serve を実行してドキュメントを構築(_gh_pages/ 内にファイルが構築される)
  7. ブラウザでhttp://localhost:9001を開く

 

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

依存関係のインストールで問題が発生したときは、以前のすべての依存関係のバージョン(グローバルやローカル)をアンインストール(node_modules/ を削除し、npm cache verify を実行してキャッシュをクリアなど)し、npm install を再実行する。