Bootstrap 3をWebページ制作環境にしよう(1) 事前準備

Bootstrap 3からRCが取れたので、いろいろ試してみた結果を。

Bootstrap 2と同様、Bootstrap 3にもビルドの仕組みが含まれているので、それにうまく乗っかれば効率的にWebページを作ることができます。

ということで、まずはその準備から。

Bootstrap 3のダウンロード

なにはともあれBootstrapを入手します。いわゆるソースコードが必要なので、Getting started のDownload latest source codeからzipをダウンロードして展開するか、GitHubからcloneしてください。

Gruntのインストール

Bootstrap 3ではビルドにGruntを使います。

まず、Gruntのインストールにはnodeが必要ですので、お好みの手段でインストールしてください。

次にGruntですが、Grunt 0.3からは、gruntのコマンドラインインターフェースであるgrunt-cliをインストールして利用するようになっています。0.3未満のGruntを使用していた場合は、npm uninstall -g gruntを実行してアンインストールしておきましょう。

grunt-cliはグローバルにインストールしましょう。npm install -g grunt-cliを実行すればインストール完了です。

必要なnpmモジュールのインストール

Bootstrap 3展開後のフォルダに移動し、npm installを実行すると、必要なモジュールが自動でインストールされます。

確認

Bootstrap 3展開後のフォルダからgrunt distを実行します。タスクがいくつか流れたあと、以下の表示が出ればうまくいった証拠です。

Done, without errors.

次回は、この環境でLiveReloadを実現してみましょう。