CSSとJavaScriptのコンパイル

Bootstrapは、フレームワーク開発の作業を効率化するビルドシステムとして、 Gruntを採用してます。 ここではどのようにして、ソースコードのコンパイル、テスト実行、その他の作業を行っているかを説明します。

Gruntのインストール

Gruntをインストールするためには、まずnode.js(npmを含む)のダウンロードとインストールが必要になります。 npmは、ノードのパッケージ化モジュール(node packaged modules)の意味であり、 node.jsを通じて依存性の管理を行います。

次にコマンドラインを実行します。

  1. npm install -g grunt-cliを実行して、grunt-cliをグローバル上にインストールします。
  2. ルートの/bootstrap/ディレクトリに移動して、npm installを実行します。 npmはpackage.jsonファイルを見つけて、 そこに記述されているローカルでの開発に必須となる依存パッケージの自動インストールを行います。

完了すると、コマンドラインから様々なGruntのコマンドを実行出来るようになります。

利用可能なGruntのコマンド

grunt dist CSSとJavaScriptのコンパイル

コンパイルとminifyされたCSSとJavaScriptファイルを含め、/dist/ディレクトリを再生成します。 これは、Bootstrapユーザーにとって、標準で必要となるコマンドになります。

grunt watch (監視)

Lessのソース・ファイルが変更されて保存されていないかを監視して、自動的にCSSに再コンパイルします。

grunt test (テストを実行)

ヘッドレスブラウザであるPhantomJSを使用して、 JSHintQUnitのテストを実行します。

grunt docs (docsのビルドとそのテスト)

CSSとJavaScript、その他のローカル上でjekyll serveを実行してドキュメントを閲覧出来るようにする際に使用されるファイル等のビルドとテストを行います。

grunt (全てのビルドとテストの実行)

CSSとJavaScriptのコンパイルとminifyを行い、ドキュメント用のWebサイトのビルドを行い、 ドキュメントに対してHTML5の検証を実行し、カスタマイズされたアセットやその他の再生成を行います。 これには、Jekyllが必須となります。 通常は、あなたが自分自身でBootstrapをハックする場合にのみ必須になります。

トラブルシューティング

依存性のインストール、またはGruntコマンドの実行で問題が生じた場合は、 まずnpmによって生成された/node_modules/ディレクトリを削除してください。 次にnpm installを再実行してください。

 Back to top

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。