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を実現してみましょう。